[Resolved] Adjusting container separating space for mobile devices separately

[madmanweb]

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.)

[Leo]

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 🙂

[madmanweb]

That worked, thanks.

[Leo]

No problem 🙂

[Author]

Posts