I’m a big fan of the Divi Theme from Elegant Themes. However, like all themes, there can be bugs. One complaint I hear often is that the full-width slider is not responsive on mobile devices. Short of disabling display of the slider on mobile, I have a fix. Add this code to your custom CSS file:

@media screen and (max-width:900px)
{
.et_pb_fullwidth_slider_0 .et_pb_slide {
background-size: contain!important;
height: 250px !important;
}

}

@media screen and (max-width:479px)
{
.et_pb_fullwidth_slider_0 .et_pb_slide {
background-size: contain!important;
height: 110px !important;
}

Adjust the height and width pixel sizes to suit your needs and bear in mind, you may need to exercise a little “trial and error” to get this fix to suit your pleasure. Why? Other factors need to be considered like whether your site is setup to display wide or boxed. And, importantly, it helps if all your slides are the same sizes. If you are using background images for your slides, I have found a width of between 1280 and 1920 pixels works well.

Doubtful you have a drawer full of different mobile devices for testing. A good online resource for use is Screenfly. Happy sliding!

Share This