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

    The simple enfold fullscreen slider is used in the startpage. It looks good but this element is not responsive.

    Why? And how to fix that?

    Thanks Sven


    Hey AWZ,

    It looks responsive on my end, what exactly are you looking to change?

    Best regards,


    Hi Rikard,

    inspectors in responsive mode (google chrome etc) doesn´t work and doesn´t show the result in this case.
    It´s not responsive! You have to look with a real smartphone.

    The images doesn´t become smaller on smartphones. The background images in all slides doesn´t work in landscape and portrait mode. You see nothing from the images there. Only a weired pixeled part of it.

    Please fix it in your code or show me a way to fix it.

    Thanks Sven


    Hi Sven,

    Here is what I see on my end using a real phone: https://imgur.com/a/XKg0nqL. It looks fine to me, so I think you will have to be a bit more specific as to what you want to change. If you expect to see exactly the same results on mobile as on desktop then that will likely not be possible, since the screen sizes are very different.

    Best regards,


    Hi Rikard,

    please post such datas in private mode. Thanks!

    Here are all smartphone screenshots from us to the slider issue. Testet in iOS devices (iPhone 8-10) with the same result. Not responsive! Background images doesn´t fit and display responsive in landscape and portrait mode. You see nothing from the images.

    PS. We work over 5 years responsive. I know, what is possible and not. For example, if you use slider plugins, you have full control over the display in different breakpoints (desktop, laptop, tablet, smartphone). In your build-in full slider of avia, you have no such preferences.

    So again: I need a proper code (beacuse it´s in your avia css) or a workaround to fix this.

    Thanks Sven


    PS. The issue concerns iOS. Did your developers consider safari (iOS) in the avia css for responsive display of the slider too?


    Sorry … but we need a quick and good solution!
    The slider is direct on the startpage and we get no approval to that website.

    You have detailed infos to that issue: desription, issue limitation, screenshots.
    => Your avia fullscreen slider doesn´t work responsive on iOS devices (market share 25%).

    • Testet with different iOS devices and all mobile browsers.
    • Testet for free on BrowserStack https://live.browserstack.com/
    • => same result: the slider on iOS devices doesn´t work (Screenshots)

    Thanks for a fix / solution



    Working work around. Could have come from you, but nothing came.

    /***** 481 > 777px *****/ 
    @media only screen and (max-width : 777px) {
    	.avia-slideshow-inner li {
    	background-size: 100%!important;
    	background-position: 50% 0!important;
    /***** < 480px *****/ 
    @media only screen and (max-width : 480px) {
    	.avia-slideshow-inner li {
    	background-size: 300%!important;
    	background-position: 50% 50%!important;


    Thank you for sharing the details and sorry for the late reply.

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    /* CSS - */
    .avia-fullscreen-slider .avia-slideshow>ul>li {
        background-size: cover !important;

    For more info please refer to the documentation

    If you have any questions please feel free to get back to us.

    Best regards,

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