Hide sidebar on "mobile"

You can do something like this:

@media (max-width: 1170px) {
	.content-area,
	.inside-footer-widgets > div {
		float: none;
		width: 100%;
		left: 0;
		right: 0;
	}
        .sidebar {
            display: none;
        }
}

But now, the sidebar is floating on the left ??

Is it added to your site right now or did you remove it?

I remove it, because it looks very bad. I can make a screenshot for you.

it-antwort.de/picture

The .sidebar {display:none;} should have removed it completely.

I’d have to see it on the actual site in order to see what’s stopping that from happening.

Alternatively, just add !important after the word “none”.

Now its added to my site and you can see what i mean ??

I’ve another idea. On mobile, my design is different. And can I make it, that the design changes also on 1170 px? Thanks!

If you’ve changed the design of mobile with custom CSS, just update your media query with the 1170px value (although I don’t suggest going full mobile at this width).

The code isn’t working due to the sticky element plugin you’re using.

You’ll need to do this:

@media (max-width: 1170px) and (min-width:769px) {
	.content-area,
	.inside-footer-widgets > div {
		float: none;
		width: 100%;
		left: 0;
		right: 0;
	}
        .sidebar {
            display: none !important;
        }
}

Thank you, now it works, but on mobile there isn’t a sidebar now. But there I want the sidebar to be under the content and above the header (like before), how can I do this? Thanks!

I just adjusted the code above.

Now it will only apply between 1170px and 769px, meaning your regular 768px code will work as it did before.

If you’re using a different width than 768px, just adjust the 769px above to 1px larger than your specified width.

Thank you Thank you Thank you! You’re the best!

You’re welcome ??