[Resolved] Move Sidebar Below Main Content Even For Desktop

[Joezer]

Hello! 🙂

I want to move the right sidebar below the main content. Kinda like when you view it in mobile. But also in desktop.

I tried this code that I found in this forum, it works but the sidebar is wider than the main content

@media (min-width: 769px) {
body.single-post #right-sidebar {
position: -webkit-sticky;
position: sticky;
top: 0;
}
}

Thanks!

[Leo]

Hi there,

Are you able to provide an example of what you are trying to achieve?

It’s likely that moving the sidebar isn’t the best/easiest solution but I just want to make sure.

Let me know 🙂

[Joezer]

Sorry, that is the wrong code. This is the one that I am using:
#primary, #right-sidebar {
width: 100%;
float: none;
}
#primary {
clear: both;
}
}

But the problem is that the sidebar is wider than the main content when viewed on desktop.

[Joezer]

Kindly check the single posts. I’ve applied that code now to the site 🙂

[Leo]

Try this:

.single.separate-containers .site-main {
    margin-right: 0;
}

[Joezer]

It’s working now. Thank you! 🙂

[Leo]

No problem 🙂

[Author]

Posts