Okay
  Public Ticket #2213690
full size responsive
Closed

Comments

  • Gerardo started the conversation

    Hello!

    I want to make my "layerslider full size" responsive but this type is not responsive so in mobile is so huge, and the "responsive" one is not full size, not height: 100%.

    How can I get  a full size (width: 100% and height: 100%) responsive layeslider?

    Thanks!


  • [deleted] replied

    Hello Gerardo,

    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 select the Full Size layout type and the Hero Scene mode for the slider. That way the slider will always match the height of the screen and not reach over it, filling the viewport completely, regardless of the device/size you are using.

  • Gerardo replied

    Hello Attila,

    I'm using now these specifications but in mobile its shows a full height screen as well. However in responsive is ok as you can see at the images.

  • [deleted] replied

    Unfortunately you cannot change a single slider's layout based on the device it's viewed on, so you can't show the slider fullscreen on desktop while changing it to normal responsive on mobiles.

    However, you can do this with separate sliders. 

    Basically, you build two sliders with different sizes or with different layouts for desktop and mobile. After that include them both to the page to the same location. And only display them on the required device/size by using the Hide over and Hide under options in the Slider Settings. 

    Usually these are the sizes for the breakpoints:
    desktop computers Screen width > 1024px
    tablets Screen width >= 768px and <= 1024px
    phones Screen with <= 767px