-
Posts
-
Hi,
I have a responsive layer slider on the home page of my site. We have some text that displays on each slide.
I basically need the text to display at xx position from the left and yy position from the top.
Having no issues with aligning the text at yy position. However from slide to slide the xx position changes. They are all set to display at 60% from the left.
Is there another way to do this and still keep everything responsive? If at lower screen resolutions I would need to put a transparent background to the text block so it would display properly I am all for it but need the text to display always at the same spot (from one slide to the next)http://toticorp.com/toticorptest/
Username: Staging
Password: eNciphEr*@2o14Site is now live. Any thoughts or workaround for this?
http://toticorp.com/Hey!
You can try to change the “Responsive under” and “Layers container” values on the General settings page: http://www.clipular.com/c/5682764015730688.png?k=7pAw3AeKRmT1aHHXvwyqV_AUYn8 – they will change the responsive behavior based on the screen size. You can also try a different slider like: http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380 – maybe it gives you better results than the LayerSlider script.
Best regards,
PeterIt’s set to be responsive. My issue is the following:
These two screenshots were taken on the same browser with the same width.
http://www.clipular.com/c/6423176649113600.png?k=mymLrkUvBMScZN2FXa4-R7C74vU
http://www.clipular.com/c/5678418851004416.png?k=ZxAwlqpGT_pDD1zuC9DT_b3vmLcHowever the distance from the left edge in one is bigger than the other.
Hey!
Please try adding !important rule to your left value as following
left: 60%!important;Best regards,
YigitHey!
Thank you for the link.
I tried to use the login details above but it’s incorrect.
Username: Staging Password: eNciphEr*@2o14Can you please provide the login details again?
Cheers!
IsmaelHi Ismael,
I have had to completely redo the homepage layer slider. Same link as above.
The text is now superimposed on a white background however I was wondering if it’s possible to move the image lower so as the text is not superimposed at all on a background image? Or to move the text higher.
Basically I would like the text to be on a completely white background and for my images to display at 100% (So nothing gets cut off from the top of the image)Hi Josue,
I have a total of 6 slides with text (top center) that superimposes on the images.My issues is the following:
Right now; in the screenshot you see a white area where the text is superimposed on. http://i.imgur.com/70BzC1P.jpg
That white area (where my red arrows are) is part of the image. So my image basically has a white rectangle. In various resolutions it shrinks or expands with the image
My issue is that at some higher resolutions the white area is completely gone and my text appears on some background color (from the picture) and it’s not easy to read.
We need an area on the top portion of the layer slider (where my red arrows are) to stay constant throughout the entire duration of the 6 slides so my text from each slide can go on that area.
We don’t want that area to disappear going from one slide to the next or to cover the picture up.
Hey!
Thank you for the update.
Is this still an issue on your installation? From what I understand, when I checked the website, the text above the slider are responsive. I don’t see the issue described when I resize the browser. What you did with the images with the white space above is not conventional for responsive websites but surprisingly it works. I’m not sure how you did it but I’ll suggest that you remove the white gap above the image then add the background image as another layer. Add another layer on top of it with the text block. Just a suggestion but I think it will be more responsive.
Best regards,
IsmaelHey!
Try adding this code to the Quick CSS:
.ls-inner:before { content: ""; height: 17%; width: 100%; background: white; display: block; position: absolute; top: 0; z-index: 3; } #layerslider-text{ z-index: 10; position: relative; }Cheers!
JosueHi Josue,
I added the code to my child style.css file but there doesn’t seem to be any change in the way the white area is displayed.
Am I supposed to add anything else somewhere? Same link as above.
E.Thanks sooo much Josue. Sorry I missed that.
Worked great. :)
I added the specific page id to the css as other layer sliders on the site were being affected as well.
- The topic ‘Layer Slider text block position issues on home page’ is closed to new replies.