Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 27, 2019 at 10:23 am #1072226
    Maarten

    I use the Enfold theme on nearly all websites for my clients and it’s a great theme but i’m disappointed by the horizontal gallery. On mobile the images are cropped from the top and bottom and on desktop if you select an image its cropped from the top. I’ve made some CSS adjustments and now it looks good on most browsers but not yet in Firefox. In Firefox the images are streched vertically. But i think it should not be nescesarry to make any custum CSS, this should work as it is.

    This is my custom CSS:

    .av-horizontal-gallery-inner {
    padding: 60px !important;
    margin-bottom: 80px !important;
    }
    .av-horizontal-gallery-wrap.noHover {
    width: auto !important;
    }

    How can i change it so it also works in Firefox?

    February 27, 2019 at 10:46 am #1072232
    Maarten

    I found the extra code myself:

    @-moz-document url-prefix() {
    .av-horizontal-gallery-wrap.noHover {
    width: 172px !important;
    }
    }

    The exact width depends on the uses image.

    But i still think that this had to be correct without any extra CSS!

    February 28, 2019 at 10:43 am #1072582
    Maarten

    After the Enfold 4.5.4 update i had to start all over again. I’ve changed the CSS to this to get it right:

    .av-horizontal-gallery-inner {
    padding: 60px !important;
    margin-bottom: 120px !important;
    }

    .av-horizontal-gallery-wrap.noHover {
    width: 100px;
    height: 210px;
    margin-right: 5px;
    }

    @media only screen and (min-width: 768px) {
    .av-horizontal-gallery-wrap.noHover {
    width: auto;
    height: 300px;
    }
    }

    @media only screen and (min-width: 989px) {
    .av-horizontal-gallery-wrap.noHover {
    width: auto;
    height: 360px;
    }
    }

    @-moz-document url-prefix() {
    .av-horizontal-gallery-wrap.noHover {
    width: 100px !important;
    }
    }

    @-moz-document url-prefix() {
    @media only screen and (min-width: 768px) {
    .av-horizontal-gallery-wrap.noHover {
    width: 152px !important;
    height: 300px;
    }
    }
    }

    @-moz-document url-prefix() {
    @media only screen and (min-width: 989px) {
    .av-horizontal-gallery-wrap.noHover {
    width: 172px !important;
    height: 350px;
    }
    }
    }

    March 1, 2019 at 6:15 pm #1073317
    Victoria

    Hi Maarten,

    https://cl.ly/224fa997e10f Seems to look fine. Did you manage to adjust it or what do you need help with?

    Best regards,
    Victoria

    March 2, 2019 at 9:16 pm #1073721
    Maarten

    Hello Victoria,

    Yes i did manage to adjust it but why was this nescesarry in the first place? Why isn’t this correct from the start? Now i think i have to adjust the pixel values every time i use different size images. I’m disappointed that the Enfold team didn’t code it the right way.

    Best regards,
    Maarten

    March 5, 2019 at 10:02 pm #1075102
    Victoria

    Hi Maarten,

    Sorry that it did not come up to your expectations. The gallery is not perfect on mobile, but glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.