Slide-in plugin hiding behind elements and not closing on 13-15" screens

Hello WPMU team! Hope your Friday is fantastic!

I am having a bit of an issue with the slide-in plugin. On screens smaller than 17", the top of the plugin is not showing and the close button is hiding, making it impossible to close!

The site that is having this issue is theie5.org/peninsulaim

I have tried to add a margin to the top of the slide-in though this causes the bottom to cut off on a 13" screen. Have a made the slide-in too long?

Thank you for your help and any CSS that may correct the issue. Access is granted so that you may look at the issue :slight_smile:

Have a good weekend!

Mandy

  • Michelle Shull

    Hi, Mandy!

    I totally see what you're talking about, I even took a screenie. I think we may be dealing with a larger issue, as well, however, because the background is bleeding through the slide-in.

    Can you share the css you added, or the settings you used to style it? I think we can ultimately fix this with a little positioning, but I want to see what parts we made, and which parts you added, so everyone can play together nicely.

    Thanks Mandy, and I hope you've got a super weekend in front of you!

  • Mandy

    #wdsi-slide_in .wdsi-slide-close:before{
    border-color: #1abc9c !important;
    }
    #wdsi-slide_in .wdsi-slide-close{
    border-color: #1abc9c !important;
    }
    #wdsi-slide_in .wdsi-slide-wrap {
    border-color: #1abc9c !important;
    }
    #wdsi-slide_in .wdsi-slide-content .wdsi-slide-title {
    color: #1abc9c !important;
    }

    .wdsi-slide-content a{
    color: #1abc9c !important;
    }

    .wdsi-slide-close a{
    color: #1abc9c !important;
    }

    #wdsi-slide_in .wdsi-slide-content {
    color: #e3e3e3 !important;
    }

    #wdsi-slide_in{
    z-index: 9999 !important;
    padding-top: 10px !important;
    }

    I also had #wdsi-slide_in{
    margin-top: 15px
    }

    However, when I added that, this is when the slider moved down and disappeared.

    When I originally created it, the slider was working fine. Then, I made the font bigger and added the css for the colors and it stopped working correctly on the smaller screens.

    Thank you so much. Like I said, it might be the length of it and in that case, I could shorten it.

    @Michelle Shull, you are the best! Thank you. Hope your weekend is off to a good start. Check out the slide-in on other pages of the site and see if you issue changes for you!

    Do you think I should start over with a new one and see if it fixes the issue or do you see what it is? Thank you again!

    Pura Vida,
    Mandy

  • Michelle Shull

    Hey Mandy!

    I totally forgot the screenshot last time, didn't I? That's what I get for working without my coffee. It's attached to this post. : )

    I hate to tell you to start over, but can you test and see if a new slide in has the same behavior? I think this one may have gone (technical term alert) hinky.

    Thanks! It's always nice to see you here, your sites have helped me master whole new ways of CSSing. : )

  • Mandy

    I am happy to hear that the million and one questions that I have had actually did you some good and didn't drive you crazy @Michelle Shull.

    Ok, as far as this issue, I am perplexed! Before I added the CSS to change the color scheme, I had not issue with the close button hiding. Now, I have tried creating a new slide-in and tried adding padding and margins to the top and nothing is working. I am not sure what is going on but maybe someone here has an idea???

    Here is the CSS I have added:

    #wdsi-slide_in .wdsi-slide-close:before{
    border-color: #1abc9c !important;
    }
    #wdsi-slide_in .wdsi-slide-close{
    border-color: #1abc9c !important;
    }
    #wdsi-slide_in .wdsi-slide-wrap {
    border-color: #1abc9c !important;
    }
    #wdsi-slide_in .wdsi-slide-content .wdsi-slide-title {
    color: #1abc9c !important;
    }

    .wdsi-slide-content a{
    color: #1abc9c !important;
    }

    .wdsi-slide-close a{
    color: #1abc9c !important;
    }

    #wdsi-slide_in .wdsi-slide-content {
    color: #e3e3e3 !important;
    }

    #wdsi-slide_in{
    padding-top: 10px !important;
    }

    I have given access to the site: http://theie5.org/peninsulaim

    As you noted, on screens like my 17" screen, it is fine and on the 13" screen and smaller, it is not. It was fine, meaning you could see the close button, prior to adding the styling css.

    Please help :slight_smile:

  • Mandy

    @aristath,

    Thank you for getting back to me.

    I added the CSS :

    #wdsi-slide_in{
    position: absolute;
    top: 400px;
    }

    That is why you can see the slide-in on all screen sizes, however it no longer scrolls with the page as it did without that CSS (on the appropriate screen size of course as it did not work at all on the 13" screen)

    I am looking to adjust my solution so that I can make the slide-in visible on all screen sizes and scroll with the page. If that is not possible then my solution will work, but scrolling would be nice :wink:

    Thanks for being awesome!

    Pura Vida!
    Mandy

  • aristath

    Hello again @Mandy,

    The problem here is not CSS... it's more of a structural issue.
    The slide-in for some reason is added inside the q_slider.
    As a result it can't get the proper z-index CSS property and when scrolling simply disappears behind other elements!
    If you move that to be outside elements like that, then you'll be able to use for example something like this:

    #wdsi-slide_in{
      position: fixed;
      top: 15%;
      z-index: 9999;
    }

    I hope that helps!

    Cheers,
    Ari.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.