New Landing › How can we help? › Atelier › Making Images 50% on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Back to forum
    Posted in: Atelier
  • September 8, 2016 at 12:03 pm #291102
    mdearden
    Member
    Post count: 39

    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.
    September 8, 2016 at 1:13 pm #291120
    David Martin – Support
    Moderator
    Post count: 20834

    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.

    September 8, 2016 at 1:20 pm #291123
    mdearden
    Member
    Post count: 39

    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.
    September 8, 2016 at 2:44 pm #291145
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    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

    September 8, 2016 at 3:49 pm #291159
    mdearden
    Member
    Post count: 39

    Thank you Mohammad, that worked perfectly!

    September 8, 2016 at 5:12 pm #291180
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Glad 🙂 to help you.
    Thanks
    Mohammad

  • Back to forum
    Posted in: Atelier
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.