change gallery width for mobile

Hey mattb1169,

Thank you for the inquiry.

Are you using the Gallery element from the Advance Layout Builder? If yes, then you can use this css code to adjust the width of the gallery items on mobile view.

@media only screen and (max-width: 767px) {
    #top #wrap_all .avia-gallery .avia-gallery-thumb a {
        width: 100%;
    }
}

Please note that the css above will affect every gallery in the site and if you want to only apply it to a specific gallery, apply a custom css class or ID to the element and use that instead of the generic gallery selector (.avia-gallery).

// https://kriesi.at/documentation/enfold/add-custom-css/

Best regards,
Ismael

Hi,

Can we see the site? Please post the site or page URL in the private field. We have to check the gallery, just to make sure that we are referring to the same element.

Did you toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code?

Best regards,
Ismael

Hi,

Thank you for the info.

Are you referring to the masonry gallery in the home page? Please try to use this css code to adjust the items’ width to 100% on mobile view.

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .responsive #top .av-masonry-entry {
    width: 100%;
  }
}

Best regards,
Ismael

Hi,

Thanks for the info.

For the gallery, this css should work.

@media only screen and (max-width: 767px) {
    #top .grid-sort-container .no_margin.av_one_half {
       width: 100%;
    }
}

Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

Best regards,
Ismael