[Resolved] Align blog content to middle, but space widget sidebar

[Adam]

Next question, how can I move/align my blog content so it’s in the middle of the space.

I basically want to squish it in at the sides when on desktop, but i also want to maintain a 50px gap between the blog content and the sidebar.

I’ve tried adding:

@media (min-width:769px) {
.single.one-container .site-content {
padding-left: 175px;
padding-right: 175px;
}
}

.sidebar .widget {
margin-left: 50px;
}

But this just pushes both the sidebar and blog toward the middle.

I want the sidebar to be up against the right side of the whole page container, a gap of 50px then the blog content centered in the space that’s left.

[David]

Hi there,

remove your CSS and try this:

@media(min-width: 1024px) {
    .single-post .site-content {
        display: flex;
    }

    .single-post .site-content:before {
        content: '';
        display: block;
        width: 25%; /* Set value to width of right sidebar */
    }

    .single-post #primary,
    .single-post #right-sidebar {
        float: none;
        left: unset;
    }
}

[Adam]

Ok, that does it…but it does it for the whole site, not just the blog/single post section.

[David]

Updated the CSS to apply to single posts only

[Adam]

That’s what i’m after, only issue is it now pushes over the widgets to off-center when viewed on a mobile?

[David]

That code should not effect Mobile sizes – just changed the code above to apply only to screens over 1024px. Try that.

[Adam]

That didn’t work 🙁
I did however add padding on the mobile footer, which then straightened it up perfectly.

[David]

Glad to hear you found a solution

[Author]

Posts