Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1485573

    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!

    #1485591

    Hey Stefan,

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

    Best regards,
    Rikard

    #1485665

    Hello Rikard,

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

    Link is in private content.

    Thank you!

    #1485719

    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

    #1485743

    HI Rikard,

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

    #1485746

    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.

    #1485747

    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

    #1485766

    great now it works with !important.

    Thank you guys for helping!

    #1485777

    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Gallery resposive column’ is closed to new replies.