Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #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)

    #246634

    http://toticorp.com/toticorptest/
    Username: Staging
    Password: eNciphEr*@2o14

    #247223

    Site is now live. Any thoughts or workaround for this?
    http://toticorp.com/

    #248075

    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,
    Peter

    #248252

    It’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_b3vmLc

    However the distance from the left edge in one is bigger than the other.

    #248937

    Hi,
    Does anyone have any suggestions to this issue?

    #250324

    Hey!

    Please try adding !important rule to your left value as following
    left: 60%!important;

    Best regards,
    Yigit

    #250335

    Hi 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.
    #250340
    This reply has been marked as private.
    #250406

    Hey!

    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!
    Ismael

    #251116
    This reply has been marked as private.
    #251273

    Hi 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)

    #252436

    Hey!

    Could you create a mockup of what would you want to achieve?

    Best regards,
    Josue

    #252763

    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.

    #253087

    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,
    Ismael

    #253838

    Hi 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.
    #254641
    This reply has been marked as private.
    #254742

    Hey!

    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! 
    Josue

    #254982

    Hi 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.

    #255181

    There are some typos in the code, please fix them:

    Best regards,
    Josue

    #255195

    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.

    #255200

    You are welcome, glad we could help :)

    Regards,
    Josue

Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘Layer Slider text block position issues on home page’ is closed to new replies.