Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 17, 2025 at 11:56 am #1485573
    Luisgasser

    Hi,

    i have a gallery with 4 columns – looks nice on desktop.
    But in the mobile version ist a bit to small – so is there a way to make 2 columns on mobile with CSS like this “@media only screen and (max-width: 767px){”

    Thank you for helping!

    June 17, 2025 at 8:56 pm #1485591
    Rikard

    Hey Stefan,

    Could you post a link to where we can see the element in question please?

    Best regards,
    Rikard

    June 19, 2025 at 9:04 am #1485665
    Luisgasser

    Hello Rikard,

    the gallery with this 4 pictures should be on mobiles with 2 columns.

    Link is in private content.

    Thank you!

    June 20, 2025 at 11:40 am #1485719
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

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

    Best regards,
    Rikard

    June 21, 2025 at 10:52 am #1485743
    Luisgasser

    HI Rikard,

    thank you for helping, but it doesn’t change anything.

    June 21, 2025 at 12:32 pm #1485746
    Guenni007

    is it a gallery or a masonry gallery?

    Rikard’s code should do the job – but the specificity is the same as the original rule. So you need to be more specific in your selector or override it with !important.

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

    or

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

    if you do like to have it only on that gallery – use a custom class to that element.

    June 21, 2025 at 12:32 pm #1485747
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top #main .avia-gallery.av-mb6m8z6a-b9f99ac9fd31fe48d94c453aabd891f1 .avia-gallery-thumb a {
    width: 50%;
}

    Then disable Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression
    and enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files
    Then clear your browser cache and any cache plugin, and check.

    Best regards,
    Mike

    June 22, 2025 at 8:21 am #1485766
    Luisgasser

    great now it works with !important.

    Thank you guys for helping!

    June 22, 2025 at 5:09 pm #1485777
    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 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Gallery resposive column’ is closed to new replies.