Archived topic
Remove new white space from homepage due to adding fixed sidebar CSS
3 replies · Started by Anna on August 14, 2020
Hi GeneratePress,
I need to have a fixed-width sidebar so that the sidebar doesn't shrink below 300px wide on smaller screen sizes.
I followed the documentation here: https://docs.generatepress.com/article/sidebar-widths/#fixed-width
The CSS worked for my sidebar.
The problem is that my front page doesn't have a sidebar but since I added the CSS, my home page content is no longer centered. It's moved to the left and there is a blank white space on the right (I assume it's due to the CSS I added that has created an empty space as if there is a sidebar).
I added the conditional recommended in the documentation:
add_filter( 'generate_right_sidebar_width','tu_custom_right_sidebar_width' );
function tu_custom_right_sidebar_width( $width ) {
// If we're on the home page
if ( is_front_page() ) {
return 0;
}
// Return the default
return $width;
}
But it didn't help recenter the main content (container?) on the front page.
Can you help me restore my front page to the center again?
Hi there,
Try editing your CSS to this:
@media (min-width: 769px) {
#right-sidebar {
width: 300px;
}
.inside-right-sidebar {
padding-right: 20px;
}
body:not(.no-sidebar) #primary {
width: calc(100% - 300px);
}
}Thanks, Leo!
It worked.
No problem :)
Thanks for pointing out! I'll update the doc page.
