Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1296796

    Hello,
    I have a 4 column image width setting with my site image gallery. For mobile, I would like it to be a single column. Is there a specific CSS code or setting I can adjust to make this change?

    #1297123

    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

    #1297187

    Thank you Ismael. I am trying to get the gallery to go from a 4 column thumbnail width to a 1 column thumbnail on mobile. I reduced the max to 500px as a test in the code you sent but I didn’t see any change. Is there a different CSS script I need to add for that to work?

    #1297455

    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

    #1297615

    Thank you. Info is below

    #1297843

    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

    #1298351

    I was referring to the gallery section on the cases page. Link below. THANK YOU!

    #1298729

    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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.