How to Set the Height of Your Full Width Slider

I keep seeing the question pop up:

I am using the Full Width Slider Module and it is cutting off my image in odd places and it looks horrible on mobile.

So when was confronted with it directly by my college BFF who is about to launch a blog, I figured if I was going to answer her properly (while at the same time getting a good handle on this myself) I would turn the answer into a blog post.

  • In your Full Width Slider Module, click on the Slide (you may have one there or you may need to add one).
  • Click on Custom CSS
  • Add min-height: 56.25vw; to the MAIN ELEMENT section.

Done.

A little side note: the Full width image module renders the height perfectly, but many of us prefer the Slider module so you can add text and buttons over the image module.  If you scroll to the end of this post you will see the full width image module on top, then the Slider module using that little bit of CSS I shared above.

The Divi Theme Page Builder utilizes three categories of aspect ratios (definition of aspect ratio: the proportional relationship between height and width – this is all PERCENTAGES).

  • 16:9
  • 4:3
  • 3:4

The ultimate guide to using images with Divi can be found here.

The awesome thing about the guide is you are given all the images sizes you will need; however the full width slider module doesn’t automagically set your image height perfectly. The width will be just fine because the slider sets the image to full width, but the height changes, therefore “cropping” on phones and tablets (ie RATIOS / PERCENTAGES are out of whack).

For most computer screens the width of 1920 works just fine.  If your designing for larger screens or retina, you may want to go even bigger than 1920, I have included the heights below, and checkout this Aspect Ratio Calculator if you need even more dimensions.

  • 1920×1080
  • 2560×1440
  • 3840×2160

In order to properly render the height you want across all devices we need to know the percentage of 1080 (height) to 1920 (width).

1080 ÷ 1920 = .5625 x 100 = 56.25

This line of CSS

min-height: 56.25vw;

forces the image to display in the height you want with the correct ratio.

To break it down:

  • min height (minimum height)
  • 56.25 is the percentage of the width to our height
  • vw; stands for viewport (screen size) width

I will give you some images to illustrate.

full width slider for blog

Add the CSS in the Slide Settings: toggle to Custom CSS & in the Main Element section.

Set Slider Height

I hope this helps.  Let me know if you have a better trick!

A little about the author, Eileen Lonergan

Eileen Lonergan is a WordPress website designer and internet marketing specialist. She is the founder and Community Manager of the Divi Theme User Group on Facebook. Eileen's focus is on web design, content marketing and search engine optimization.

6 Comments

  1. Victor Duse

    Thanks alot, this really helped me. Since I had six slides in my slider (and it takes much time and effort to change them individually), I used this code in the Extra CSS instead:

    .et_pb_slide_0, .et_pb_slide_1, .et_pb_slide_2, .et_pb_slide_3, .et_pb_slide_4, .et_pb_slide_5, .et_pb_slide_6 {

    min-height:56.25vw !important;

    }

    Works like a charm!

  2. Jennifer Wozniak

    Very helpful!

  3. Antony

    Great post Eileen.

    Thank you for solving a rather annoying problem with Divi. Brilliant!

  4. Eugene

    Thank you. That was clear and very helpful.

  5. divi-sensei

    Thats an interesting one! We haven’t even thought about using the fullwidth slider in such a way and your guide to calculate the height depending on the aspect ratio is genius. Congrats, very good article! 🙂

  6. Bert Harmsma

    Wow Eileen,

    Thanks for this perfect solution. This is just what I needed.

Submit a Comment

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

External links on this website may be affiliate links that could result in us receiving compensation (payment) when you purchase a product or service from that link. For example, we may receive pay per click revenue or commission on sales of products. This helps us to pay the bills and deliver great content for you to enjoy when you are browsing these web pages. You do not pay any extra fees for these items.

By purchasing a product from The Elegant Marketplace you are agreeing to these terms. We do not offer custom support queries, although suggestions will be accepted and acted upon if possible. We do hold data that allows us to connect with you for product updates when you purchase a product. This is not an email marketing list. Should you wish to sign up to our marketing list, please visit our homepage where you will see an optin - We send out around two emails a week to keep you informed of product updates, You may opt out of our marketing communications at anytime by using the unsubscribe facility found at the bottom of each email.

Get the latest news!

Join our mailing list to receive the latest news and updates from our team.

Thanks, we appreciate your support

Pin It on Pinterest

Share This