Okay
  Public Ticket #1834572
Increase layers size on mobile devices
Closed

Comments

  • diegolo61 started the conversation

    Hi team,

    Is there any way to display the layers bigger just in mobile devices? If you check my web you will see I have create some sliders with text over a white sheet. The display is correct on laptops, but very small on mobile so it is quite difficult to read. I canĀ“t find where are the mobile options to increase them.

    On the other hand, can I change the shape of the buttons? The automatc shape is rounded but I would like to change to rectangular one.

    Thanks to lot. Have a nice day

    Diego

  • [deleted] replied

    Hello Diego,

    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.

    Since version 6 you have the option to display layers only on certain devices (desktop, mobile, tablet). This feature gives you the option to create separate layers and layouts for mobile and desktop view in the same slide, and only show them on the required device. Furthermore, you also have the option to set a minimum font size for texts on mobiles.

    illustration-layer-devices@2x.png

    Additionally to the device specific layers, you could also build two sliders with different sizes or with different content for desktop/mobile, include them both to the site, and only display them (using the Hide over and Hide under options) on the required device.

    Regarding the custom navigation areas, unfortunately at the moment there is no built-in option in the plugin to relocate or edit the them, you would need to do some coding to achieve it. Please note that it requires custom coding and web development experience so it is not recommended for unexperienced users.
    Alternatively, you can make a new skin or modify one, but it also needs some CSS knowledge.

    You can approach this two ways. You can either edit the image file that contains the arrows. It was created with a "CSS sprites" method, meaning that only certain parts of the image is being showed.
    As long as you do not change the arrows' sizes drastically and leave it in the correct position in the image file, you can freely change it. This method does not require CSS editing.

    Or you can edit the skin.css file. The classes you are looking for are .ls-nav-prev, .ls-nav-next