Archived topic
32.5% sidebar width in desktop, but reflecting on mobile too
1 reply · Started by Ashin on July 25, 2020
Viewing posts 1–2 of 2
Hello,
I wanted to show 32.5% sidebar and 67.5% content area. I used the bwlow CSS code which I saw in some of your support queries.
.sidebar.grid-35 {
width: 32.5%;
}
.content-area.grid-65 {
width: 67.5%;
}It's working very well on desktop, but unfortunately it's also getting affected on mobile where the sidebar shows at the bottom. So, the content area in mobile gets a big padding on the left. No such issues on tablet, though.
Which CSS code to use to make sidebar 32.5% on desktop only with no effect on mobile/tablet?
Hi there,
you can use @media queries:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints
For tablet to desktop devices you would do this:
@media (min-width: 769px) {
.sidebar.grid-35 {
width: 32.5%;
}
.content-area.grid-65 {
width: 67.5%;
}
}
This archived topic is closed to new replies.
