Archived topic
Adjusting container separating space for mobile devices separately
3 replies · Started by madmanweb on June 4, 2019
Viewing posts 1–4 of 4
Hi.
My design uses a lot of space between containers (80px) on the desktop. But on mobiles, this is way too high.
I tried using the Customizer > Layout > Container option but it only has an option for changing it globally. I need to reduce this only for mobile devices. How do I do that?
(And please add this feature to the wishlist for the next GP version. I can adjust content padding separately for mobile devices but not spacing.)
Hi there,
Nice site!
Give this CSS a shot:
@media (max-width: 768px) {
.separate-containers .widget, .separate-containers .site-main > *, .separate-containers .page-header,
.widget-area .main-navigation {
margin-bottom: 40px;
}
.right-sidebar.separate-containers .site-main {
margin: 40px 40px 40px 0px;
}
.separate-containers .inside-right-sidebar, .separate-containers .inside-left-sidebar {
margin-top: 40px;
margin-bottom: 40px;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps :)
That worked, thanks.
No problem :)
This archived topic is closed to new replies.
