Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 19, 2025 at 11:59 am #1485672
    xeovision

    Hi,
    i am using the gallery on the page with images. On desktop it is fine for me but on mobile i would like to change the grid. From actually 6 images in row to e.g. 4 images. Reason is to show them little bigger. There is no setting in the gallery addon right? How can i change the grid only on mobile?

    screenshot
    screenshot

    • This topic was modified 3 days, 6 hours ago by xeovision.
    • This topic was modified 3 days, 6 hours ago by xeovision.
    • This topic was modified 3 days, 6 hours ago by xeovision.
    June 20, 2025 at 7:46 am #1485703
    Ismael

    Hey Sebastian,

    Thank you for the inquiry.

    Apply a Custom CSS Class name (e.g “avia-custom-gallery”) to the Gallery element in the Advanced > Developer Settings panel, then add this css code to adjust the width of the items on mobile view. 

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top .avia-custom-gallery .avia-gallery-thumb a {
    width: 25%;
  }
}

    Best regards,
    Ismael

    June 21, 2025 at 12:52 pm #1485749
    Guenni007

    on 6 items besides each other the setting vor less than 767px is allready set to 33% – and this looks nice to me.

    Maybe you only like to influence the range inbetween:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
  #top .avia-custom-gallery .avia-gallery-thumb a {
    width: 25% !important;
  }
}
    June 21, 2025 at 1:06 pm #1485750
    Guenni007

    or – more flexible in styling for complete control over the whole screensize rages – working with grid layout:

    #top #wrap_all .avia-custom-gallery .avia-gallery-thumb {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-flow: row;
  gap: 20px;   /*** if you like to have a space between the images ***/
}

#top #wrap_all .avia-custom-gallery .avia-gallery-thumb a {
  width: unset !important;
}

    when images are less than 180px – a new row will be created

    June 21, 2025 at 3:00 pm #1485758
    xeovision

    Thx guys, great solutions.

    June 21, 2025 at 3:50 pm #1485760
    Mike

    Hi,
    Glad Guenni007 could help, thank you Guenni007, 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 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Change Gallery grid in Mobile’ is closed to new replies.