Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 30, 2020 at 12:51 pm #1217976
    Pro4uPro4u

    Hi
    I have used Horizontal Gallery on my site. The pictures are displayed fine in PC but on mobile phones the pictures are cut off.
    I have entered the following code in Enfold child/General styling/Quick CSS and also in Enfold schild, style.css but the whole pictures are still not being displayed.

    @media only screen and (max-width: 479px) {
    .av-horizontal-gallery .av-horizontal-gallery-inner {
    height: 80vh !important;
    }
    }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .av-horizontal-gallery .av-horizontal-gallery-inner {
    height: 120vh !important;
    }
    }

    May 30, 2020 at 3:38 pm #1218006
    Lodewijkvw

    Hey,

    I am having the same issue with Horizontal Gallery. The issue also shows when I make the browser window smaller on PC in Chrome. I tried various suggested CSS additions mentioned in previous topics (issue already exists since 2017?) but none work.

    June 7, 2020 at 11:39 pm #1220324
    Mike

    Hi,

    @Pro4uPro4u     sorry for the late reply and thanks for the link, for your pages, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) {
.responsive #top.page-id-110 .av-horizontal-gallery-img {
    height: 100% !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}
.responsive #top.page-id-108 #tabbransch .av-horizontal-gallery-img {
    height: 300px !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}
}


    @Lodewijkvw     for your page please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) {
.responsive #top.page-id-45 .av-horizontal-gallery-wrap {
        margin: 1px !important;
        overflow: visible !important;
}
.responsive #top.page-id-45 .av-horizontal-gallery-img {
        height: 100% !important;
}
.responsive #top.page-id-45 .av-horizontal-gallery-inner {
	min-height: 400px !important;
}
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    June 7, 2020 at 11:52 pm #1220325
    Lodewijkvw

    Thanks, it seems to work as expected.

    best,

    Lodewijk

    June 8, 2020 at 12:23 am #1220328
    Mike

    Hi,
    Thanks for the feedback and glad that it helps, hopefully, this also helped @pro4upro4u.

    Best regards,
    Mike

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