[Resolved] Ignore container width for one specific column

[Jason]

Hi there!

I have built a custom homepage using the Volume site library on GeneratePress. After the first four posts, I have a query loop in a column with a different background color. I was wondering if I can make that span full width of the browser, similar to the header and the footer so that the background color goes all the way across the browser, rather than the width of the container.

I’m assuming this is done through custom CSS?

Here’s the site: https://fullcleared.com/

Thanks!

[Leo]

Hi Jason,

It’s possible to do with CSS but it will likely lead to some horizontal scrolling issues on mobile.

Since you are already using GenerateBlocks, the best method to achieve this is to:

1. Set the content container for that page to be full width:
https://docs.generatepress.com/article/content-container/

2. Wrap a GB container block outside each query loop and use it to set the section to either full width or contained width.

Can you get started and let me know if you get stuck somewhere?

[Jason]

Hey Leo!

Thanks for the response – I can’t seem to figure out an easy way to add a container block and move each query loop into it. What’s the easiest way to wrap each query with a container?

Thanks!

[Jason]

Nevermind 🙂

[Leo]

Hey Jason,

Just want to check in to make sure you were able to achieve what you wanted.

If so I’ll mark the topic resolved.

Let me know 🙂

[Jason]

Yes I’ll mark it as resolved – thanks Leo!

[Leo]

No problem 🙂

[Author]

Posts