Tagged: LayerSlider, text position
-
AuthorPosts
-
April 2, 2014 at 5:58 pm #246633
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)April 2, 2014 at 5:58 pm #246634http://toticorp.com/toticorptest/
Username: Staging
Password: eNciphEr*@2o14April 3, 2014 at 10:32 pm #247223Site is now live. Any thoughts or workaround for this?
http://toticorp.com/April 7, 2014 at 8:09 am #248075Hey!
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,
PeterApril 7, 2014 at 4:02 pm #248252It’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.
April 8, 2014 at 8:17 pm #248937Hi,
Does anyone have any suggestions to this issue?April 11, 2014 at 5:35 pm #250324Hey!
Please try adding !important rule to your left value as following
left: 60%!important;Best regards,
YigitApril 11, 2014 at 6:44 pm #250335Hi Yigit,
Thanks so much for the reply but still no go.
I added
left: 70% !important;
to the Custom style settings and still the same results- This reply was modified 10 years, 7 months ago by Edna.
April 11, 2014 at 6:57 pm #250340This reply has been marked as private.April 12, 2014 at 2:31 am #250406Hey!
Thank you for the link.
I tried to use the login details above but it’s incorrect.
Username: Staging Password: eNciphEr*@2o14
Can you please provide the login details again?
Cheers!
IsmaelApril 14, 2014 at 3:26 pm #251116This reply has been marked as private.April 14, 2014 at 7:40 pm #251273Hi 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)April 17, 2014 at 5:10 am #252436Hey!
Could you create a mockup of what would you want to achieve?
Best regards,
JosueApril 17, 2014 at 4:23 pm #252763Hi 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.
April 18, 2014 at 10:38 am #253087Hey!
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,
IsmaelApril 21, 2014 at 3:21 pm #253838Hi Ismael,
Yes the issue is still there in higher screen resolutions (tested on 27-inch iMac (2560 x 1440) ).- This reply was modified 10 years, 6 months ago by Edna.
April 22, 2014 at 9:22 pm #254641This reply has been marked as private.April 23, 2014 at 4:02 am #254742Hey!
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!
JosueApril 23, 2014 at 3:18 pm #254982Hi 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.April 23, 2014 at 7:54 pm #255181There are some typos in the code, please fix them:
Best regards,
JosueApril 23, 2014 at 8:38 pm #255195Thanks 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.April 23, 2014 at 8:54 pm #255200You are welcome, glad we could help :)
Regards,
Josue -
AuthorPosts
- The topic ‘Layer Slider text block position issues on home page’ is closed to new replies.