I am trying to center a sublayer of text on a legacy layerslider that came with a wrapbootstrap template called grove. I have the following set up for each slide:
<div class="ls-layer" style="transition2d:5;"> <img class="ls-bg" src="/uploads/global/slide3.jpg" alt="Slider Background"> <div class="ls-s-1 large-caption" style="top:50px; left:50%; delayin : 0; slidedirection : fade; slideoutdirection : fade;"> <div class="carousel-text"> <h1 class="animated fadeInDownBig text-center">Dedicated with <span>Love</span> <br> to my <span>Wonderful Children</span><br> by Carol Keller, May 2006</h1> </div> </div> </div>
see the left:50% but what happens is on a fresh browser (started up after closing) Firefox or chrome, the text will be moved over to the left about 100px or so. If you resize the browser or even hit f12 for inspector, it bounces right to the center where it should be. It is like it doesnt have the full slider position loaded while it is trying to figure out the center.
Also, after the 3 slides go through, the 1st one centers fine upon the 2nd and consecutive loops.
Is there anything you could think of I might look at to try and get this to work properly?
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 that you are nesting content inside a single layer (h1 in a div inside another div). This kind of setup can easily cause problems with the layer's position, responsiveness or other attributes.
We'd recommend to only use an h1 text layer, and apply a class on it where you add the styles (font-family and font-size the most important).
But it's even better if you apply this with inline style.
What version of the plugin do you use currently? The slider markup has changed a long time ago (several years). Please note that, what you call layers are now slides, and the sublayers are now layers.
Also, the classes you are using (for example class="ls-s-1 large-caption animated fadeInDownBig text-center carousel-text") are not the correct approach. You shouldn't apply styles on layers with classnames from CSS files. It should be something like this instead: <h1 class="ls-layer" style=" all the styles you want "> ... </h1>
What's important is that you add the font-family and font-size to the h1 style. And you can also add everything else you want to modify there, like font-weight, line-height, etc.
Hi there,
I am trying to center a sublayer of text on a legacy layerslider that came with a wrapbootstrap template called grove. I have the following set up for each slide:
<div class="ls-layer" style="transition2d:5;"> <img class="ls-bg" src="/uploads/global/slide3.jpg" alt="Slider Background">
see the left:50% but what happens is on a fresh browser (started up after closing) Firefox or chrome, the text will be moved over to the left about 100px or so. If you resize the browser or even hit f12 for inspector, it bounces right to the center where it should be. It is like it doesnt have the full slider position loaded while it is trying to figure out the center.<div class="ls-s-1 large-caption" style="top:50px; left:50%; delayin : 0; slidedirection : fade; slideoutdirection : fade;">
<div class="carousel-text">
<h1 class="animated fadeInDownBig text-center">Dedicated with <span>Love</span> <br>
to my <span>Wonderful Children</span><br>
by Carol Keller, May 2006</h1>
</div>
</div>
</div>
Also, after the 3 slides go through, the 1st one centers fine upon the 2nd and consecutive loops.
Is there anything you could think of I might look at to try and get this to work properly?
Thank you very much for any help you can give.
Mike Keller
Hello Mike,
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.
Thank you for your patience.
The problem is that you are nesting content inside a single layer (h1 in a div inside another div). This kind of setup can easily cause problems with the layer's position, responsiveness or other attributes.
We'd recommend to only use an h1 text layer, and apply a class on it where you add the styles (font-family and font-size the most important).
But it's even better if you apply this with inline style.
I tried the following and it still doesnt center properly on the 1st load. (especially in chrome)
Here is my layerslider code now:
<div id="layerslider" style="width: 100%; height: 360px; margin: 0 auto; ">
<div class="ls-layer" style="transition2d:5;"> <img class="ls-bg" src="/uploads/global/slide1.jpg" alt="Slider Background">
<h1 class="ls-s-1 large-caption animated fadeInDownBig text-center carousel-text" style="top:80px; left:50%; delayin : 0; slidedirection : fade; slideoutdirection : fade;"><span>Tried & True</span> Recipes<br>
from the <span>Keller Kitchen</span> and more... </h1>
</div>
</div>
Anything else? Can you give a code of example of a better way to do this?
Thanks
Thank you for the feedback.
What version of the plugin do you use currently? The slider markup has changed a long time ago (several years). Please note that, what you call layers are now slides, and the sublayers are now layers.
Also, the classes you are using (for example class="ls-s-1 large-caption animated fadeInDownBig text-center carousel-text") are not the correct approach. You shouldn't apply styles on layers with classnames from CSS files. It should be something like this instead: <h1 class="ls-layer" style=" all the styles you want "> ... </h1>
What's important is that you add the font-family and font-size to the h1 style. And you can also add everything else you want to modify there, like font-weight, line-height, etc.