[Resolved] Help Needed With Post Container Settings (Unable To Set Desired Widths Etc.)

[Marty]

Hi guys I’ve searched for info & also spent hours trying to adjust my Layout settings as desired but simply cannot get it right.

I’m wanting to replicate the style of my ReHub theme in Generatepress Premium to switch my sites to Generate Press Premium from ReHub.

This layout to replicate is:
– 1200px container width
– 840px content width (26px left content padding + 788px text body/image width + 26px right content padding)
– 336px right sidebar width, 24px spacing between sidebar & content container

I’ve tried Content Padding, Separating Space, Container Width, and Widget Padding and Right Sidebar Width, yet I cannot achieve the above (it’s always being shifted one way or the other).

I also tried custom CSS for the widths, however even that does not work as apparently the Separating Space parameter seems to also change the content container somehow. The only way I’ve been able to get 840px width with the content container is with a Separating Space of 0.

Is there something I’m missing? I can’t figure out if this is possible or I’m not understanding something. (Note: sidebar doesn’t 100% have to be 336px)

Thanks for your help as I’m flustered trying at this point. :/

[Example URLs added]

[David]

Hi there,

can you provide the Example URL ?

[Marty]

Hello David – sorry I don’t know what happened to the example URLs I thought I provided.

ReHub example: (URL removed now)
GP Prem. working test post example: (URL removed now)

Thank you!

[David]

In GP 2.5 we’re introducing a flex box version for layouts which will make this sort of thing a lot easier. But back to today …. ReHub has a lot of different breakpoints – do you want them as well ?

[Marty]

Oh that’s really good news about 2.5.

They’re not super important, but yes if I can get those the breakpoints would be nice. 🙂

[David]

Try adding this CSS:

@media(max-width: 1024px) and (min-width: 769px) {
    body .grid-container {
        max-width: 740px;
    }
    .right-sidebar .site-content {
        display: flex;
        flex-wrap: wrap;
    }
    .right-sidebar .content-area,
    .right-sidebar #right-sidebar {
        width: 100%;
    }
}

@media (min-width: 1024px) {
    body .grid-container {
        max-width: 980px;
    }
    .right-sidebar .site-content {
        display: flex;
    }
    .right-sidebar .content-area {
        width: auto;
        margin-right: auto;
    }
    .right-sidebar .site-main {
        width: 655px;
    }
    .right-sidebar #right-sidebar {
        max-width: 300px;
    }
}

@media(max-width: 1279px) and (min-width: 1141px) {
    body .grid-container {
        max-width: 1080px;
    }
    
    .right-sidebar .site-main {
        width: 755px;
    }
}
@media (min-width: 1280px) {
    body .grid-container {
        max-width: 1200px;
    }
    .right-sidebar .site-main {
        width: 840px;
    }
    .right-sidebar #right-sidebar {
        max-width: 336px;
    }
}

[Marty]

Hi David, thank you so much! I added the CSS and once I adjusted the sidebar padding to 0 it was just right.

So relieved to finally have it adjusted right after so many hours of fiddling with it.

Thank you again for your help! Much appreciated! 🙂

[David]

Awesome glad to hear that. Yes layouts that require very specific sizes are best left to CSS. Hoping 2.5 will at least make the CSS simpler 🙂

[Author]

Posts