DIVI THEME TIPS & TRICKS

If you are using the highly popular Divi Theme from Elegant Themes and its full width slider module, chances are you’ve noticed it’s not responsive on mobile and some tablets. I have a fix – copy and paste the following code into the Divi Custom CSS area. Adjust the height and width values to your satisfaction.

@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;
}

}

A worthy alternative to the Divi full width slider is to download and use the most excellent Meta Slider by Team Updraft, a free plugin in the WordPress repository. The Meta Slider is extremely easy to use and is responsive out of the box. Simply upload your images and select your display preferences, and you are done. The Meta Slider will generate a shortcode you can copy and paste into Divi’s full width code module.

Enjoy!

Share This