Archived topic
Align blog content to middle, but space widget sidebar
7 replies · Started by Adam on August 4, 2020
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.
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;
}
}Ok, that does it...but it does it for the whole site, not just the blog/single post section.
Updated the CSS to apply to single posts only
That's what i'm after, only issue is it now pushes over the widgets to off-center when viewed on a mobile?
That code should not effect Mobile sizes - just changed the code above to apply only to screens over 1024px. Try that.
That didn't work :(
I did however add padding on the mobile footer, which then straightened it up perfectly.
Glad to hear you found a solution
