Responsive boxed layout margins

  • icecandy

    (@icecandy)


    8 years, 6 months ago

    Hi, I am just evaluating GeneratePress (free) theme. I am a developer, but more mobile, not web.

    Main question is how can I control all the margins/padding in the boxed layout responsively? I want a boxed layout and have managed to set that up OK. I want a box of width 1300 pixels. I want all my content to bleed to the edge of the box: top, bottom left and right, although I would like to be able to control the left and right margins responsively – i.e. keep some left/right margin on desktop, but make it smaller on smaller devices.

    The effect I would like to achieve is basically to have a boxed layout on desktop which goes to an (effectively) full screen layout on tablet or mobile (except with a defined left/right margin).

    The complication in this is that I am using an angled divider between sections (using Elementor) and this angled divider must extend full width across the boxed layout on desktop or the full screen on tablet or mobile devices.

    At the moment I seem to get a white left/right margin on phone and tablet devices and can’t seem to get rid of it.

    Please advise if this is possible and if how. Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Leo

    (@leohsiang)

    8 years, 6 months ago

    Hi there,

    If I understand you correctly, you are looking for the Content Padding option in our premium plugin: https://docs.generatepress.com/article/content-padding/

    We also have page builder container options as well: https://docs.generatepress.com/article/page-builder-container/

    If not then we would have to use some CSS. Can you link me to the site?

    Thread Starter icecandy

    (@icecandy)

    8 years, 6 months ago

    Thanks leo.

    These options look like what I was after. Just considering whether to go Premium but I’m sure I will.
    In the meantime this CSS seemed to work:

    .inside-header, .inside-page-header, .one-container .site-content, .separate-containers .comments-area, .separate-containers .inside-article, .separate-containers .page-header, .separate-containers .paging-navigation {
    padding: 0 !important;
    }
    .separate-containers .inside-left-sidebar, .separate-containers .inside-right-sidebar, .separate-containers .site-main {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    }

    Leo

    (@leohsiang)

    8 years, 6 months ago

    Yup that CSS looks right 🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Responsive boxed layout margins’ is closed to new replies.