Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 14, 2019 at 1:02 pm #1110303
    lagruga

    Hey Guys,

    I have configured my Masonry Gallery to have ‘large gap between elements’, this works well for desktop but not for mobile.

    I would like the mobile version to be 1 PX Gap.

    Thanks for your help.

    June 15, 2019 at 6:27 am #1110569
    Rikard

    Hey lagruga,

    I can’t see a Masonry Gallery on the page you linked to, where can we see the actual element?

    Best regards,
    Rikard

    June 15, 2019 at 10:17 am #1110629
    lagruga

    Hey Rikard,

    It is below the product properties, screenshot attached – thanks

    June 16, 2019 at 6:30 pm #1110847
    Victoria

    Hi lagruga,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) and (min-width: 480px) {
  .responsive #top .av-masonry-entry {
      width: 52%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .responsive #top .av-masonry-col-5 .av-masonry-entry {
      width: 30.9%;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 17, 2019 at 3:08 pm #1111029
    lagruga

    Hi Victoria, it has not worked and therefore I have removed the code from the locations mentioned, please advise – thanks.

    June 18, 2019 at 3:08 pm #1111321
    lagruga

    Hey guys, any news on this one? Thanks.

    June 18, 2019 at 4:45 pm #1111362
    Victoria

    Hi lagruga,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    June 18, 2019 at 8:58 pm #1111494
    lagruga

    Hi Victoria,

    Credentials attached – thanks.

    June 20, 2019 at 12:11 pm #1111915
    lagruga

    Hey Guys, any progress? Thanks.

    June 21, 2019 at 8:08 am #1112219
    Ismael

    Hi,

    Sorry for the delay.

    Would you like to remove the default margin of the items? Please use the following code in the Quick CSS field or the child theme’s style.css file.

    @media only screen and (max-width: 479px) {
.responsive #top #main .products .product {
    margin: 0;
}
}

    Best regards,
    Ismael

    June 21, 2019 at 12:38 pm #1112313
    lagruga

    Hi,

    That didn’t work. I need the masonry gallery on mobile ONLY to be 1px gap. Currently it is configured for large gap but that’s because I need it to work like that for desktop.

    Please help as this has been nearly a week.

    Thanks

    June 24, 2019 at 3:06 am #1112800
    Ismael

    Hi,

    Sorry for the delay.

    We adjusted the code a bit to remove the large gaps between the masonry gallery items.

     .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry {
    bottom: 1px;
}

    Screenshot: https://imgur.com/a/d8AJHFG

    Best regards,
    Ismael

    June 25, 2019 at 9:34 pm #1113390
    lagruga

    Hi Ismael,

    Thanks for this. In terms if height it has worked perfectly as per your screenshot but not in terms of width. Please see screenshot attached and note the following:

    1. The Masonry on the left is the results after your update.
    2. The masonry on the right is a copy showing you the desired results (based on 1 px) and the difference between widths on both examples. It is not much but can make a difference in terms of mobile.

    Thanking you in advance.

    Best Regards.

    July 1, 2019 at 7:25 am #1114803
    Ismael

    Hi,

    Thank you for the update.

    That is possible, but you have to increase the width of the gallery’s parent container or the grid row cell and remove the padding around the masonry items.

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

.av-large-gap.av-masonry {
    padding: 0;
}

.av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry {
    bottom: 15px;
}
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.