Okay
  Public Ticket #1506723
"full width" level slider does not display 100% from mobile
Closed

Comments

  • varia started the conversation

    hi I set layer slider with fullwidth option, but from mobile you see bad it is not responsive. if I try to put fullscreen instead of fullwidth the images of my slide shell from desktop. furthermore, I would like to point out that once you insert the images in the slide they are distorted and elongated even if there are no settings on the dimensions. I would need to solve these problems with some urgency. Thanks in advance

    PS: I have to get an equal result on this site http://www.oeo.dk/ regarding the mobile version

  • [deleted] replied

    Hello varia,

    Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.

    Please show us your site or a test page with the slider inserted, where we can investigate this error to see what's wrong.

  • varia replied

    hello attila, thanks for the reply. My site is under construction, so I can not show you. but I am attaching screenshots so you can see the error. I set the slide "fullscreen" from desktop all ok, but as mobile as you can see attached, the slide is not responsive and has huge gray stripes. why is not fullscreen even from mobile?

  • varia replied

    Hi Attila, I still have problems with the mobile view of my slider. I assigned a class to change the mobile version but it does not work. How can I assign a class and recall it in my only mobile css?

    Also if I set "fullscreen" how is it possible that it is not responsive?

  • [deleted] replied

    Unfortunately we cannot troubleshoot this problem from screenshots. We need to see the slider live on the site along with its settings. Is there any way you can load it to a temporary test page that we can check, or give temporary permissions to see it ?

  •   varia replied privately
  • [deleted] replied

    Thank you. My colleagues and I will look into this to see if we can find anything, and get back to you shortly.

  • [deleted] replied

    Thank you for your patience. As we can see you have set a 100 value for the Max-width option in the Slider Settings -> Layout tab. This option is in pixels, so this value might be limiting your slider responsively. Please remove that to see if it helps.

  •   varia replied privately
  • [deleted] replied

    When you delete that field it shows as 100% to indicate that the slider is not limited. But the values you enter are interpreted in pixels.

    Regarding the responsiveness, I've checked the homepage-2 but the slider there seems to be resizing for me.  On what device/browser do you experience problems exactly ?

  •   varia replied privately
  • [deleted] replied

    The height is not full, because you are using the Full width layout. This layout only sets the slider's width to 100%, not the height. If you would like a fullscreen slider, please select the Full size layout.

    Additionally you could select the Hero scene mode for it inside the Full size. This option will always match the slider's height to the viewport, so it will always cover 100% of the browser window's height, regardless of the viewing environment.

  •   varia replied privately
  • varia replied

    Can I have an answer as soon as possible? I have a client waiting to see a full screen responsive slider. If it does not work, say it clearly.
    Thank you!

  • [deleted] replied

    Sorry for the delayed response. The slider itself is filling the space now properly, but the background images inside do not cover the whole slider.

    You can adjust this by using the Slides -> Slie Background Image -> Size option for your slides. I've currently set it to cover. This will result in the background images keeping their aspect ratio and always filling the full canvas of the slider. You can also try to use stretch instead if that works for you better.

    Let us know if this worked for you.

  • [deleted] replied

    In the meantime I've noticed that you did not add those images as background. So I'd recommend to set your background images as slide background. And then you can use the below mentioned options.

  • varia replied

    I set the image on stretch and also on covers but this does not solve the problem from mobile. The images do not fit 100% in height. The images are layers because they are animated and can not be images of fixed backgrounds. I'm wondering if there's a css class to show full size images from smartphones. My client has seen your mobile sliders but is not having the same result. I have no more time. 

    Thank you

  • [deleted] replied

    The Slide Background Image -> Size option only works for background images, so it won't affect layers.

    However, you can also keep them as layers, and in that case you will have to apply 100% width and height on them in the Styles tab. This will result in the layers filling the slider's canvas completely.

  •   varia replied privately
  • [deleted] replied

    As I can see you've applied various negative top and left values for the image layers. It also shows on your screenshot. It means that they will be mispositioned from the start of the slideshow. The layers are taking up the slider's size, but because of those negative top and left values they will not start inside the slider. Please look through the style tabs of your layers and remove any unnecessary options or values. If you position the images properly inside the slider (top 0 left 0 width 100% height 100%), they will not be cut off and there will be no empty area either. Also, the image layer from the first slide is set to be static and stays until slide 3.

  • varia replied

    hello Attila thanks for the answer, the negative value is necessary for the operation of the transition to the left, if we remove the negative values the images do not scroll to the left so slowly and our client wants to move left and very slowly. The problems are now 3:

    1 the slide from mobile is not fullsize and we still have not understood why.
    2 from iphone (any iphone) the slide does not move is steady. so there's a problem with apple mobile devices
    3. from mobile the writings are not constant, if I collapse and go back on they disappear or they stop

    Our client is very demanding and your plugin seemed like the best in the field, but these problems are limiting, we need to get a satisfactory result. If you do paid interventions at this point we are also willing to pay, just cherish these problems. Thanks in advance

  • [deleted] replied

    Thank you for the feedback. In that case please apply the following settings. Set the layer's height to 100% and leave width empty. Set top to 50% or you could even use 0, it will fill the slider vertically. The layer will reach out of the canvas horizontally, but if I understood you correctly, that is what you want and how you want to 'sidescroll' animate it.