Making Images 50% on mobile

[mdearden]

Hello,

Our homepage is built using image blocks which works fine on desktop and iPad, but when we go to mobile the images stretch to be full width which isn’t the best option. We would like to have two coloums of images per row but i can’t seem to get around it. There doesn’t seem to be a way to set this in the Page Builder other than to turn it off on mobile all together.

If you could help it would be much appreciated.

Thanks
Matt

@media only screen and (max-width: 767px) {
.row{
width: 50%!important;
}
}

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi Matt, using the Row’s you can choose if the content is display for desktop, tablet, mobile and any variation of either.

Using this, you can use a different custom Row layout for the tablet and mobile screen sizes.

Thanks.

[mdearden]

Hi,

Is there not a way to just make the images appear at 50% on a mobile device with CSS?

The row viability options do not allow this function in your Swift Page Builder, we can just show or hide content. I want to show it but i want it not to take up the whole mobile screen but rather have 2 columns of images.

The attached screen shot is how it shows currently.

Thanks

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 767px) {
.spb_image_banner .sf-image-banner {
    width: 46% !important;
    float: left !important;
    margin-right: 10px !important;
}
}

Thanks
Mohammad

[mdearden]

Thank you Mohammad, that worked perfectly!

[Mohammad – SUPPORT]

Hi,
Glad 🙂 to help you.
Thanks
Mohammad