Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • July 25, 2024 at 12:27 pm #1462966
    richardwilding

    Dear Kriesi,

    When viewed on a mobile, I would like to reduce the padding either side of the single column display for my masonry gallery. How can the images be larger so the margins are the same as for my menu items. Please see screenshot below.

    Thanks, Richard

    July 26, 2024 at 7:07 am #1463011
    Ismael

    Hey Richard,

    Thank you for the inquiry.

    Did you place the Masonry element inside a Column? Please provide the link to the page so that we can inspect the Masonry element.

    Best regards,
    Ismael

    July 26, 2024 at 3:21 pm #1463055
    richardwilding

    Thanks Ismael,

    Yes, the masonry gallery is inside a 1/1 column. In a large browser window the three columns of images fit nicely to the same width as my menu. But on mobile screens the images are quite a bit narrower and the margins left and right are much larger than the menu.

    Here is a private link to my dev website url:

    July 28, 2024 at 4:13 pm #1463161
    Mike

    Hi,
    To remove most of the padding for that masonry on that page on mobile, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 767px) {
    .responsive #top.page-id-21 #wrap_all .av-flex-cells .no_margin {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

    there will still be a little padding but this is needed for the element, please see the screenshots in the Private Content area of the expected results.

    Best regards,
    Mike

    July 28, 2024 at 6:21 pm #1463164
    richardwilding

    Thanks Mike,

    It’s odd, as the ‘masonry’ grid on my home page is displaying the columns with the correct padding, matching the padding either side of my menu items and other elements on the page.

    But I can’t get the images in the ‘masonry gallery’ to display images with the same margins. I have tried adding, and adjusting the css you sent, but the images on that page either display with too much margin, or too little. I can’t get them to match all the other page elements.

    How can I get these same margins for the single column ‘masonry gallery’ display?

    Thanks, Richard

    July 28, 2024 at 7:35 pm #1463166
    Mike

    Hi,
    To match the masonry on /photography/iraq/ width with homepage width on mobile please use this css instead:

    @media only screen and (max-width: 767px) {
  .responsive #top.page-id-21 #wrap_all .av-flex-cells .no_margin {
      padding-left: 15px !important;
      padding-right: 15px !important;
  }
  #top.page-id-21 .av-masonry {
    background-color: #f5f0eb;
}
}

    This will also match the background color.

    Best regards,
    Mike

    July 28, 2024 at 7:40 pm #1463167
    richardwilding

    Many thanks Mike,

    The images are now the right size, but I’m getting a white surround when I should be seeing the off-white #f5f0eb background colour?

    Best w, Richard

    July 28, 2024 at 7:45 pm #1463169
    Mike

    Hi,
    On mobile I see #f5f0eb;
    try clear your browser cache.
    If you mean desktop add this css:

     #top.page-id-21 .av-masonry {
    background-color: #f5f0eb;
}

    Best regards,
    Mike

    July 28, 2024 at 7:53 pm #1463171
    richardwilding

    Thanks, I’ve tried ‘Remove All Website Data’ in Safari on my phone but I’m still seeing the white frame around the images. It looks correct in your screenshot

    July 28, 2024 at 8:48 pm #1463182
    Mike

    Hi,
    Try adding !important; after background-color: #f5f0eb; like this:

    @media only screen and (max-width: 767px) {
  .responsive #top.page-id-21 #wrap_all .av-flex-cells .no_margin {
      padding-left: 15px !important;
      padding-right: 15px !important;
  }
  .responsive #top.page-id-21 .av-masonry {
    background-color: #f5f0eb !important;
}
}

    Best regards,
    Mike

    July 28, 2024 at 8:56 pm #1463184
    richardwilding

    Great, thanks Mike, that works now

    How can I apply this to all masonry galleries without specifying each individual page id?

    Thanks, Richard

    July 28, 2024 at 8:59 pm #1463186
    Mike

    Hi,
    You can remove the page ID from the css

    Best regards,
    Mike

    July 29, 2024 at 11:35 am #1463231
    richardwilding

    Sorry, how do I remove the page id from this css?

    @media only screen and (max-width: 767px) {
    .responsive #top.page-id-163 #wrap_all .av-flex-cells .no_margin {
    padding-left: 15px !important;
    padding-right: 15px !important;
    }
    .responsive #top.page-id-163 .av-masonry {
    background-color: #f5f0eb !important;
    }
    }

    July 29, 2024 at 11:37 am #1463233
    Mike

    Hi,
    please compare this to the original:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-flex-cells .no_margin {
padding-left: 15px !important;
padding-right: 15px !important;
}
.responsive #top .av-masonry {
background-color: #f5f0eb !important;
}
}

    Best regards,
    Mike

    July 29, 2024 at 11:40 am #1463234
    richardwilding

    Great, thanks Mike

    July 29, 2024 at 11:42 am #1463236
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Masonry gallery on mobile’ is closed to new replies.