Content Slider - Centre image within one side

Beaver Builder
1

Hi guys - I’ve got a content slider on this page: http://webwalrus.co.uk/holisticom/ . Problem is the image is floating left within its box. Can you help me out with how to centre the image within it’s position. This should make the spacing look better on desktop, and make it look right on mobile too.

2

Hey Joseph,

Adding the CSS snippet below should fix you right up! :slight_smile:

.fl-slide .fl-slide-photo-img {
  margin: 0 auto;
}

Ben

3

Thanks for the pointer Ben, your code centres the element on desktop, but it looks like you need this for the mobile version:

.fl-module img {
  margin: 0 auto;
}

Would it be best to tuck this inside some media queries if it is specifically for the mobile view do you think?

4

Hey Joseph,

Right, I always forget that the content slider uses a different markup when on mobile. :slight_smile: That’s a bit too general, i.e., it applies to all images within the page builder. You can instead use the one below where it only applies to the content slider. Both should still work though. And I agree with wrapping it in media queries. :slight_smile:

.fl-slide .fl-slide-photo-img,
.fl-slide .fl-slide-mobile-photo-img {
  margin: 0 auto;
}

Ben