[Resolved] Right Sidebar no longer sticky after applying CSS code for overflow-x to html

[Andrei]

Hi folks,

Hope you’re all doing well. Sorry for bothering again, but I ran into some small issue and I’m sure you have some great idea to fix that as always 🙂

Long story short:

1. I added some HTML widgets to the footer and right sidebar
2. These widgets caused some white space only on mobile on single posts on the right side of the screen (they were overflowing I guess)
3. Because of that white space I added this CSS:

html {
width: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}

4. It solved my problem, the white space on mobile is gone, but now something else happened
5. My right sidebar is no longer sticky (even after removing the HTML widgets from it)

This was the code that was making my sidebar sticky on single posts:
.single #right-sidebar {
position: sticky;
top: 0;
}

Is there anyway to keep this sidebar sticky, but also to have the HTML snippet for the overflow so I don’t have that white space on mobile on the right side of the screen?

Please let me know if you have any suggestions 🙂

Cheers

[David]

Hi there,

try this CSS to apply the overflow control to the smaller devices:

@media(max-width: 768px) {
    html {
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden;
    }
}

[Andrei]

Hi David,

Your code worked like a charm!

Also found out I had a padding set to “.inside-right-sidebar”
I changed that padding to a padding-left and that also removed my white space on mobile. Getting better at CSS lol

Thanks and have a nice day!
Closing this thread.

[David]

Awesome – glad to hear that!

[Author]

Posts