How can i position a button so that is does not move over top of other text on the screen when resizing for responsive screen sizes. If i have a paragraph of text and then place a button below it, the button shifts up (or the text shifts down) when resizing to a smaller window size or to a mobile device. I would like my button and text layers to behave like this ...
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.
I'd recommend using percentages to position your layers instead of pixels. That way they will keep their relative position in accordance to each other. You should also use Calculate positions from: sides of the slider on all your layers. So they are all calculated the same way inside the slider.
Thanks for the quick reply. Your solution definitely helped. But i am still seeing an overlap between the text and the button. I notice upon resizing that my H1 and H2 headers (I want SEO value for keywords) are not resizing while the paragraph text is. Here is a link to the slider
Ands here is the HTML layer containing the text...
<h1><b>Simply Strategic Marketing</b></h1> <h3><b>Can Solve Complex Business Challenges</b></h3> <b>Bring the Benefits of a Virtual CMO to Your Business</b><br> - Achieve Revenue and Profitability Targets<br> - Enter or Expand Target Market Segments<br> - Increase Sales Volume, Velocity and Value<br> - Measure and Maximize Your Marketing ROI<br>
The problem is that you are merging multiple headings and additional text into one single layer. This is not a recommended method, as it can interfere with the layer's responsiveness, and it could be resized incorrectly.
We'd recommend to create a separate text layer for each one. One for h1, one for h3 and one for the rest. You can position them under each other to get the same look. The responsive behavior should be correct this way.
That solved the problem Attila. However, i am now left with a new problem. Apparently the page i created with full screen-width layer sliders is not SEO friendly - which i am really trying to optimize for...
And i got this even after changing all of my slider layouts from full width to responsive (something i did not want to do as my theme only displays the main slider full width in this mode - see below)
If you would like to, you can adjust your sliders to mobile and have different content/settings on it.
Since version 6 of LayerSlider 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, tablet 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.
Additionally to the device specific layers, you could also build two sliders with different sizes or with different content for desktop and mobile, include them both to the site, and only display them (using the Hide over and Hide under options) on the required device. This gives you more control, but requires more work.
With one of these methods, you can have larger text and differently placed links on mobile.
Yes, i have been experimenting with all of those features in order to balance the goals of SEO with slider behavior. That includes all variations of font size, minimum/mobile font size, px versus % padding, and layer placement with various layers turned on and off for mobile display as well as the global setting for full width versus responsive.
I was unable to achieve the results i wanted without compromising the use of separate H1 and H2 tagged layers. It always adjusted smoothly with one layer of text tagged as a paragraph. The use of multiple layers tagged as H1, H2 and P never resized gracefully as is they were a unit.
I also find it confusing that to bold text strings seems to require <b> </b> but the use of other HTML codes seem to fowl things up. In a text layer, i shouldn't have to use any coding at all. I think i could get more value from the product if i were a programmer, which i am not.
I might suggest you guys create some examples for some of the more common use cases. I think my example would be fairly typical: H1 header followed by H2 sub header, followed by paragraph body copy all over a CTA button with a masked image underneath. I just cant seem to make it work without drastically reducing the amount of text to just a few words per layer. Also in a future release, you may want to put more emphasis on SEO such that is satisfies Yoast best practices.
How can i position a button so that is does not move over top of other text on the screen when resizing for responsive screen sizes. If i have a paragraph of text and then place a button below it, the button shifts up (or the text shifts down) when resizing to a smaller window size or to a mobile device. I would like my button and text layers to behave like this ...
https://www.leadquizzes.com/
thx
Dave
Hello Dave,
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.
I'd recommend using percentages to position your layers instead of pixels. That way they will keep their relative position in accordance to each other. You should also use Calculate positions from: sides of the slider on all your layers. So they are all calculated the same way inside the slider.
Hi Atilla,
Thanks for the quick reply. Your solution definitely helped. But i am still seeing an overlap between the text and the button. I notice upon resizing that my H1 and H2 headers (I want SEO value for keywords) are not resizing while the paragraph text is. Here is a link to the slider
http://vcmo.net/slider-test
Ands here is the HTML layer containing the text...
<h1><b>Simply Strategic Marketing</b></h1>
<h3><b>Can Solve Complex Business Challenges</b></h3>
<b>Bring the Benefits of a Virtual CMO to Your Business</b><br>
- Achieve Revenue and Profitability Targets<br>
- Enter or Expand Target Market Segments<br>
- Increase Sales Volume, Velocity and Value<br>
- Measure and Maximize Your Marketing ROI<br>
Any suggestions?
Dave
Thank you for the feedback. My colleagues and I will look into this to see what might be wrong, and get back to you shortly.
Thank you for your patience.
The problem is that you are merging multiple headings and additional text into one single layer. This is not a recommended method, as it can interfere with the layer's responsiveness, and it could be resized incorrectly.
We'd recommend to create a separate text layer for each one. One for h1, one for h3 and one for the rest. You can position them under each other to get the same look. The responsive behavior should be correct this way.
That solved the problem Attila. However, i am now left with a new problem. Apparently the page i created with full screen-width layer sliders is not SEO friendly - which i am really trying to optimize for...
I get this error from Yoast...
Error: Your homepage cannot be indexed
which sends me to this page...
https://search.google.com/test/mobile-friendly
where i get this test result...
Tested on: Nov 29, 2019 at 9:25 AM
Page is not mobile friendly
This page can be difficult to use on a mobile device
FIX YOUR WORDPRESS PAGE
Fix the following 2 issues
Clickable elements too close together
Text too small to read
And i got this even after changing all of my slider layouts from full width to responsive (something i did not want to do as my theme only displays the main slider full width in this mode - see below)
www.vcmo.net
Any advice?
Dave
If you would like to, you can adjust your sliders to mobile and have different content/settings on it.
Since version 6 of LayerSlider 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, tablet 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.
Additionally to the device specific layers, you could also build two sliders with different sizes or with different content for desktop and mobile, include them both to the site, and only display them (using the Hide over and Hide under options) on the required device. This gives you more control, but requires more work.
With one of these methods, you can have larger text and differently placed links on mobile.
Hi Atilla,
Yes, i have been experimenting with all of those features in order to balance the goals of SEO with slider behavior. That includes all variations of font size, minimum/mobile font size, px versus % padding, and layer placement with various layers turned on and off for mobile display as well as the global setting for full width versus responsive.
I was unable to achieve the results i wanted without compromising the use of separate H1 and H2 tagged layers. It always adjusted smoothly with one layer of text tagged as a paragraph. The use of multiple layers tagged as H1, H2 and P never resized gracefully as is they were a unit.
I also find it confusing that to bold text strings seems to require <b> </b> but the use of other HTML codes seem to fowl things up. In a text layer, i shouldn't have to use any coding at all. I think i could get more value from the product if i were a programmer, which i am not.
I might suggest you guys create some examples for some of the more common use cases. I think my example would be fairly typical: H1 header followed by H2 sub header, followed by paragraph body copy all over a CTA button with a masked image underneath. I just cant seem to make it work without drastically reducing the amount of text to just a few words per layer. Also in a future release, you may want to put more emphasis on SEO such that is satisfies Yoast best practices.
THanks,
Dave