Fixed position for text over fullscreen slider

  • Resolved jannmirch

    (@jannmirch)


    5 years, 3 months ago

    I love this plugin but it is giving me fits with the text placement over the fullscreen slider.

    By design, we want to hide the project info unless the user clicks/hovers over the text. We’re using a simple ToolTip CSS (added via an HTML block) which works as we want it to. However, getting the text to sit at the top left of the page regardless of browser size or mobile device. But if I place it too far up, the ToolTip doesn’t work.

    I’m sure it has something to do with the Z-index but I can’t figure it out. Is there a way to place it so it appears above the left arrow but closer to the top of the page?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author eedee

    (@eedee)

    5 years, 3 months ago

    @jannmirch,

    happy that you like the plugin, and your website is a very nice example of how Gutenslider can be used.

    If i get it correctly you set the top padding of your slider to 24%. Try setting it to a lower value or even 0. You can find it in the “Spacing”-settings at the very low of Gutenslider settings.

    Thread Starter jannmirch

    (@jannmirch)

    5 years, 3 months ago

    Thank you for the kind words.

    I had tried the Spacing settings, but the text seems to fall under the (empty) main content padding and the hover-over effect then won’t work.

    I’ve adjusted the Spacing to 0 and commented out my styles so you can see what I’m talking about.

    I feel like it is something with the Z-index…

    Thread Starter jannmirch

    (@jannmirch)

    5 years, 3 months ago

    I was able to change the .wp-block-eedee-block-gutenslider.content-change .slide-content style to:

    position: absolute;
    top: calc(25% + var(–gutenslider-arrow-y-offset));

    which I used based on the arrow styling. It seems to be working.

    Plugin Author eedee

    (@eedee)

    5 years, 3 months ago

    Cool if you found a workaround. Contact us if you need more help.

    Thread Starter jannmirch

    (@jannmirch)

    5 years, 3 months ago

    I think I’m close, but not there yet.

    The position of the Project Notes div is where I want it. But the ToolTip effect is inconsistent. It should work that when you hover over the project notes (or click on mobile) you see more text. But it doesn’t work consistently.

    For example, on mobile, it works in portrait mode but not landscape.

    Thinking it might be too close to the arrows, I’ve tried to move it up but then it stops working on a desktop.

    Any ideas?

    Plugin Author eedee

    (@eedee)

    5 years, 3 months ago

    We rechecked the link you posted in your first post. As far as we can tell from that, try the following css:

    .wp-block-eedee-block-gutenslider {
  z-index: 0 !important;
}
Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Fixed position for text over fullscreen slider’ is closed to new replies.