Okay
  Public Ticket #1373762
Popup responsiveness
Closed

Comments

  •  2
    lijecreative started the conversation

    Hi,

    I'm setting a new website: https://www.je-depose-ma-marque.fr/

    To access the front, use these (its public, its fine):
    User: media
    Password: gora

    When you scroll down, you will notice the link "COMPRENDRE LE DÉPÔT DE MARQUE EN 5 MINUTES". It triggers my popup. Here are my issues:

    1. On small screen size, I can't set a min-height for the popup. The title goes on 2 lines but is then hidden by the video.
    2. I would like to align both bottom links on the left and of the right of the video. On small sizes, the texts go everywhere but at the right spot.

    I guess it's small fixes. Could you give me a hand?

    Thanks

    Regards

  • [deleted] replied

    Hello lijecreative,

    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.

    There are two problems. The first is that the slider is scaling down in 1:1 ratio. Everything is adjusting to each other and scaling down accordingly. But since you are using the "minimum mobile font size" option, it prevents the text layers from going under a certain size, breaking the 1:1 ratio and messing with the scaling. The text will jump into two lines since there is not enough space after a point, as it's not scaling with the rest because of the "minimum mobile font size" option.

    And the second problem is that you are using nested multilevel HTML code. This is not recommended, as the slider will only adjust the layer itself, but not the inner content. That would have to be controlled (responsiveness) by you in this case. A better approach would be to set up each element as a separate layer and use the plugin's built-in options to position and style them.

  •  2
    lijecreative replied

    Hi,

    Each text has its own layer.

    I removed the min font sizes and it fixed the problem even though the font is very small on mobiles.

    Looks good to you now?

  • [deleted] replied

    Thank you for the feedback. We will check on this to see if we can find anything else, and get back to you shortly.

  • [deleted] replied

    We've looked at it again, and everything seems to be in order now. The only issue left is the small text.

    To work around that, you could use the device specific layers. 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. 

    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.

  •  2
    lijecreative replied

    Alright, thanks for your help :)