Okay
  Public Ticket #2850715
Mobile Columns
Closed

Comments

  •  4
    cknoblich started the conversation
    August 17, 2021 at 6:42am

    Hello,

    I use the Masonry for images on my agency theme. I normally use 3 columns (3 images next to each other per row). On mobile, they are reduced to 1 column (one image) per row. How do I set it to be 2 columns on mobile?  Greetings

  • [deleted] replied
    August 17, 2021 at 8:25am

    Hi cknoblich,

    I can see that WPBakery Page Builder doesn't offer any option to do that natively. I tried with this CSS code:

    @media screen and (max-width: 767px) {
    .vc_masonry_grid .vc_grid.vc_row .vc_grid-item, .vc_masonry_media_grid .vc_grid.vc_row .vc_grid-item {
        float: left;
        width: 50%;
    }
}
    they are not two per row on devices 767px and below but the masonry is not respected by WPBakery Page Builder there.

    Thanks!

  •  4
    cknoblich replied
    August 17, 2021 at 10:48am

    Hello Ylli,

    It's a nice start, we have 2 columns now on mobile, unfortunately, the pictures no longer "connect" as they should with Masonry (see the blank spaces). On desktop they do, but with the script, no longer on mobile. Does it have something to do with the float? What can be done to fix the bug?

    Thanks,
    Jennifer

  • [deleted] replied
    August 18, 2021 at 8:07am

    Hi Jennifer,

    As I said in my last reply, the masonry is not respected by WPBakery Page Builder in screens that are 767px and below.

    Thanks for your understanding.