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.
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).
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.
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
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.
Add the CSS in the Slide Settings: toggle to Custom CSS & in the Main Element section.
I hope this helps. Let me know if you have a better trick!