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

Home Forums Support Help Needed With Post Container Settings (Unable To Set Desired Widths Etc.)

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1347485
    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]

    #1347894
    David
    Staff
    Customer Support

    Hi there,

    can you provide the Example URL ?

    #1348106
    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!

    #1348191
    David
    Staff
    Customer Support

    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 ?

    #1348201
    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. 🙂

    #1348459
    David
    Staff
    Customer Support

    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;
        }
    }
    #1348804
    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! 🙂

    #1349168
    David
    Staff
    Customer Support

    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 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.