Archived topic
How to handle different page container widths?
3 replies · Started by Gabriel on February 1, 2022
GeneratePress conveniently allows you to set the container width in the customizer but for a non trivial website this may not work everywhere. Say I stick with the default of 1200px. This is great for pages with many blocks such as home and landing pages. But what if I want different container widths for different use cases? A few examples:
Post without sidebar: 768px
Post/archive with sidebar: 1024px
Wide landing pages: 1200px
In all of these cases I want the inner container of the primary navigation and footer to stay at 1200px.
What I have been thinking about is doing this:
1. Set container width to 768px in customizer to optimize for readability
2. Keep inner container of navigation and footer contained, but override max-width in CSS to 1200px
3. Create a global style in GenerateBlocks for 1200px wide blocks on landing pages with full width layout
4. Disable the Gutenberg wide and full width blocks feature in my child theme because they seems to be a source of many issues
This should allow my editor to write readable articles by default in they want to go fancy with any full width elements set layout to full width and they can wrap the content in Group blocks, avoiding a dependency on GB in the entirety of our post archive. But I am worried that I may be breaking the GeneratePress and GenerateBlocks platform. For example, I am no longer inheriting inner width of GB containers from the customizer.
Before this I didn't have any CSS override on max-width and created a global style for the slimmer pages but adding a GB container block on every single post going forward feels wrong architecture wise.
I also experimented with creating layout elements with the different widths but found that they also set the max-width of the full width layout. What I was hoping for was that GenerateBlocks could inherit different inner container widths from GeneratePress elements.
Hi there,
my approach would be:
1. Set the Customizer Container to the largest width ie. 1200px
2. Create a Layout Element for Archives and Single Post to set the content width to 1024px.
3. Use some CSS to decrease the single post without sidebar content to 768px.
This way the base theme layout for headers/footers will remain 1200px.
The Pages will default to 1200px and GB container inner width will inherit that, which will be fine for the single posts as well.
The only negative is that Posts without sidebar in the post editor will display at 1024px.
Thank you for the advise. I will try this as develop our content.
You're welcome