[Resolved] Adjusting container separating space for mobile devices separately

Home Forums Support [Resolved] Adjusting container separating space for mobile devices separately

Home Forums Support Adjusting container separating space for mobile devices separately

  • This topic has 3 replies, 2 voices, and was last updated 2 years ago by Leo.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #919812
    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.)

    #919817
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #919850
    madmanweb

    That worked, thanks.

    #919852
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.