Last Updated on July 3, 2019

Make Your Divi Slider Wider on Mobile

Oct 3, 2017 | CSS Tutorial

Post Views: 1,488

This is from my #diviquicktip CSS snippet series in which I post different quick CSS fixes on my Facebook page whenever I come across some of the most common pesky Divi quirks.

Example:

Example

before

Problem:

Have you noticed on mobile your slider looks too skinny, causing your content to look squooshed? There’s quite a bit of space not being used on the sides in my opinion, plus it sticks out since it’s kind of ugly.

Fix:

With a bit of CSS we can change the padding of the offending area on mobile only (and tablet if you prefer) so we don’t have so much empty space.

{;} css code

/*** MAKE SLIDER WIDER ON SMALLER SCREENS ***/
@media only screen and (max-width: 980px) {
.et_pb_slide_description {
    padding: 0 !important;
}
}

Change the top/bottom padding if you need, it’s really the sides we care about.

after

Notes:

  • If you want even more “skinniness” check out this tutorial!