[Resolved] Remove new white space from homepage due to adding fixed sidebar CSS

[Anna]

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?

[Leo]

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);
    }
}

[Anna]

Thanks, Leo!
It worked.

[Leo]

No problem 🙂

Thanks for pointing out! I’ll update the doc page.

[Author]

Posts