Theme Author
Tom
(@edge22)
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;
}
}
Thread Starter
floo08
(@floo08)
But now, the sidebar is floating on the left 🙁
Theme Author
Tom
(@edge22)
Is it added to your site right now or did you remove it?
Thread Starter
floo08
(@floo08)
I remove it, because it looks very bad. I can make a screenshot for you.
Theme Author
Tom
(@edge22)
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”.
Thread Starter
floo08
(@floo08)
Now its added to my site and you can see what i mean 🙂
Thread Starter
floo08
(@floo08)
I’ve another idea. On mobile, my design is different. And can I make it, that the design changes also on 1170 px? Thanks!
Theme Author
Tom
(@edge22)
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;
}
}
Thread Starter
floo08
(@floo08)
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!
Theme Author
Tom
(@edge22)
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.
Thread Starter
floo08
(@floo08)
Thank you Thank you Thank you! You’re the best!
