OK, so I have a large headline and smaller tagline below it. I want it to be responsive, but as you can see on the mobile view, the top headline overlaps the bottom tagline, I added a bottom padding of 100px, but it seams when it wraps, it interferes with the tagline, where as it should respect the padding right? what am I doing wrong?
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 note that LayerSlider is not a page builder, it only provides the slider to your use, but it's up to you where you insert it to your site.
I believe the problem is with the page layout itself and that is what you need to change. I'd recommend to try to use different elements/blocks in the theme/page builder, or position them differently on the page so they do not overlap each other when resizing.
No, its not got anything to do with the page builder, I want a slideshow with text in, my question is about responsive text WITHIN your slider. The text is made inside your slider, not the page.
The problem is related to the values you have applied for the minimum font size and minimum mobile font size options. These options will prevent the text layers from going under a certain size, however the slider itself will still be scaled down proportionally to fit the screen resolution. This is why the text layers will overlap on smaller screens. You will need to remove those values to adjust this.
As an alternate solution, you could also create separate layers for mobile and desktop view, so they will look good on both devices:
OK, so yes, that works, but then on a mobile the text is too small. This is the reason you have the option for minimum font size. So there should be no reason why it shouldn't work, it needs to be responsive, the text needs to be large enough to read on a mobile. So if I put the min size on BOTH, then surely the bottom text should respect the padding of the title text and move down and not overlap? something isnt working right, and it needs fixing.
There is nothing to be fixed, this is how these options should work. The minimum font size option, as its name suggests, will keep the layers from going under a specified size. Once the layers reach this value, they will no longer be responsive, allowing them to keep their size, while the slider itself will still be scaled proportionally. As I've mentioned you can utilize the device specific layers feature, to create a separate layout for mobile and desktop view, with different content or sizes.
I know that's how the min text should work, it stops it from going too small, but back to my original issue: Why do they overlap when the top text goes onto 2 lines? the bottom smaller text should be moved down according to the padding of the bottom of the title text right?
The fact that your layers cannot go under a certain size is the exact reason they are overlapping on small screens. I'm really not sure how else could I put this. You cannot have two elements inside a container and expect them to stay in the same position if you start compressing the container. There is simply not enough space for them to behave the same, as they do not scale together with the slider but stay the same size.
Regarding the background, unfortunately fixed background effects were disabled by platform/browser developers for better performance on mobiles/tablets, so they are only available on desktop at the moment.
So how come it works when its not in your slider? on the examples I showed you, the bigger text moved onto 2 lines, then pushes the other text down because of padding.
And why would you disable the background on mobiles? how do I turn this on?
Quite frankly, Im regretting paying for support because you haven't given me it! this sucks beyond belief.
Unfortunately you cannot apply multiple styles to a single layer.
Have you tried the device specific layers feature that I've suggested multiple times now ? It is a perfect solution to this problem, but you seem to keep ignoring it.
OK, so I have a large headline and smaller tagline below it. I want it to be responsive, but as you can see on the mobile view, the top headline overlaps the bottom tagline, I added a bottom padding of 100px, but it seams when it wraps, it interferes with the tagline, where as it should respect the padding right? what am I doing wrong?
Hello logoglo,
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 note that LayerSlider is not a page builder, it only provides the slider to your use, but it's up to you where you insert it to your site.
I believe the problem is with the page layout itself and that is what you need to change. I'd recommend to try to use different elements/blocks in the theme/page builder, or position them differently on the page so they do not overlap each other when resizing.
No, its not got anything to do with the page builder, I want a slideshow with text in, my question is about responsive text WITHIN your slider. The text is made inside your slider, not the page.
The problem is related to the values you have applied for the minimum font size and minimum mobile font size options. These options will prevent the text layers from going under a certain size, however the slider itself will still be scaled down proportionally to fit the screen resolution. This is why the text layers will overlap on smaller screens. You will need to remove those values to adjust this.
As an alternate solution, you could also create separate layers for mobile and desktop view, so they will look good on both devices:
OK, so yes, that works, but then on a mobile the text is too small. This is the reason you have the option for minimum font size. So there should be no reason why it shouldn't work, it needs to be responsive, the text needs to be large enough to read on a mobile. So if I put the min size on BOTH, then surely the bottom text should respect the padding of the title text and move down and not overlap? something isnt working right, and it needs fixing.
There is nothing to be fixed, this is how these options should work. The minimum font size option, as its name suggests, will keep the layers from going under a specified size. Once the layers reach this value, they will no longer be responsive, allowing them to keep their size, while the slider itself will still be scaled proportionally. As I've mentioned you can utilize the device specific layers feature, to create a separate layout for mobile and desktop view, with different content or sizes.
I know that's how the min text should work, it stops it from going too small, but back to my original issue: Why do they overlap when the top text goes onto 2 lines? the bottom smaller text should be moved down according to the padding of the bottom of the title text right?
see how this works at a small screen:
http://www.logoglo.com/ and
http://intrinzec.com/
The text moves onto another line, but pushes the next text down.
That is how I want the slider to work, once the title goes onto 2 lines, it should push the next block of text down, NOT overlap.
Also, it seams the background image is not showing on my tablet.
The fact that your layers cannot go under a certain size is the exact reason they are overlapping on small screens. I'm really not sure how else could I put this. You cannot have two elements inside a container and expect them to stay in the same position if you start compressing the container. There is simply not enough space for them to behave the same, as they do not scale together with the slider but stay the same size.
Regarding the background, unfortunately fixed background effects were disabled by platform/browser developers for better performance on mobiles/tablets, so they are only available on desktop at the moment.
So how come it works when its not in your slider? on the examples I showed you, the bigger text moved onto 2 lines, then pushes the other text down because of padding.
And why would you disable the background on mobiles? how do I turn this on?
Quite frankly, Im regretting paying for support because you haven't given me it! this sucks beyond belief.
Is there anyway I can have it all on one layer? with different styles?
Unfortunately you cannot apply multiple styles to a single layer.
Have you tried the device specific layers feature that I've suggested multiple times now ? It is a perfect solution to this problem, but you seem to keep ignoring it.
I will try that out, thanks for your patience.
Let us know if it worked or if you need further assistance.