Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 5, 2020 at 6:24 pm #1181875
    AWZ

    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

    February 7, 2020 at 12:18 pm #1182286
    Rikard

    Hey AWZ,

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

    Best regards,
    Rikard

    February 7, 2020 at 6:44 pm #1182370
    AWZ

    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

    February 8, 2020 at 10:20 am #1182552
    Rikard

    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,
    Rikard

    February 8, 2020 at 12:52 pm #1182566
    AWZ

    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

    February 10, 2020 at 8:44 am #1182961
    AWZ

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

    February 18, 2020 at 10:27 am #1185579
    AWZ

    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

    Thanks!

    February 20, 2020 at 3:19 pm #1186394
    AWZ

    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;
	}}
    February 20, 2020 at 4:38 pm #1186401
    Vinay

    Hi,

    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,
    Vinay

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