I've been working on a website that uses your LayerSlider plugin, until now I'm very pleased with the quality and flexibility but recently I found a bug or stumbled upon an issue I can't seem to solve. When using your LayerSlider I am trying to add layers to one of my slides, something that is pretty straight forward.
However the problem lies within the responsiveness, when i add a H1 layer, a paragraph layer and a button layer they get a fixed height and width (CSS) on mobile devices. Therefore the font size is correct but the width of the element and parent element are fixed which result in very unreadable text with a word break after almost each word. Now i have done the following things trying to fix this:
Toggled the 'Word wrap' checkbox
Changing the width and height within the 'Styles' tab
Tried to override CSS with important statement (this fixes the text but destroys the image)
Set every layer to 100% width, unwanted result because the button layer has a background color
From a developers perspective it seems like the auto value typed in the width and height input is being ignored when rendering it to the DOM. I think this because i can't seem to find any auto value in the inspect element. As an attachment of this ticket i added a screenshot on which i marked the issue.
In case you need more information or an inlog to the website, let me know!
Thanks in advance!
P.s.: Can you add [email protected] in your reply, he is also working on the website.
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today.
I would like to confirm that we have received your message. Due to the nature of the issue you are experiencing, I will have to contact and consult with the development team first. I will get back to you as soon as I can.
We appreciate your patience while we're working towards your ticket.
The problem is caused by the min font size value that you've set for the text. This option prevents the text layers from going under a certain size. The issue is that the rest of the slider is still scaling after that point, resulting in this misalignment.
I'd recommend to create device specific layers instead. It would work better in your case. You can create separate layers with different size/position/etc in the same slide, and only show them on the required device.
Hi There,
I've been working on a website that uses your LayerSlider plugin, until now I'm very pleased with the quality and flexibility but recently I found a bug or stumbled upon an issue I can't seem to solve. When using your LayerSlider I am trying to add layers to one of my slides, something that is pretty straight forward.
However the problem lies within the responsiveness, when i add a H1 layer, a paragraph layer and a button layer they get a fixed height and width (CSS) on mobile devices.
Therefore the font size is correct but the width of the element and parent element are fixed which result in very unreadable text with a word break after almost each word. Now i have done the following things trying to fix this:
From a developers perspective it seems like the auto value typed in the width and height input is being ignored when rendering it to the DOM. I think this because i can't seem to find any auto value in the inspect element. As an attachment of this ticket i added a screenshot on which i marked the issue.
In case you need more information or an inlog to the website, let me know!
Thanks in advance!
P.s.: Can you add [email protected] in your reply, he is also working on the website.
Kind Regards,
Michel Draisma
[email protected]
Hello Michel Draisma,
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today.
I would like to confirm that we have received your message. Due to the nature of the issue you are experiencing, I will have to contact and consult with the development team first. I will get back to you as soon as I can.
We appreciate your patience while we're working towards your ticket.
Hello again,
The problem is caused by the min font size value that you've set for the text. This option prevents the text layers from going under a certain size. The issue is that the rest of the slider is still scaling after that point, resulting in this misalignment.
I'd recommend to create device specific layers instead. It would work better in your case. You can create separate layers with different size/position/etc in the same slide, and only show them on the required device.