[Resolved] full width block

[Daniele]

Hi,
I’m trying to build a layout similar to this for my homepage -> https://www.rektmag.net/

but I cannot go fullwidth for my wpshowpost element..I’m forced to stay into the container

How can I go fullwidth only with this element?

[Leo]

Hi there,

You can try using the full width page builder container:
https://docs.generatepress.com/article/page-builder-container/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniele]

Hi,
but is possibile to “break the grid” only with an element? I would like to have only an element full width, and the rest of the page normal

[David]

Hi there,

it is possible to break out the container using some rather hackish CSS which is what Gutenberg Block editor does when you select Full Width on a supported block.

Personally i would set the page to full width as per Leo’s advice.
Content you wish to keep contained add to a Group Block – this will use the Container settings from the customizer.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniele]

Thanks David

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sjoerd]

For future reference, this might be interesting to use as well:
https://codepen.io/webmandesign/post/gutenberg-full-width-alignment-in-wordpress-themes

I have actually used it for a full width container block element while using a sidebar as well.

.alignfull.full-width-fb {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
}

@media screen and (min-width: 900px) {
	.alignfull.full-width-fb {
		width: auto !important;
		margin-left: calc(50% / .64 - 50vw) !important;
		margin-right: -50vw !important;
	}
}

Quick explanation of setting up the container block:

1. Add a container block to your layout and set it to full width
2. I have assigned the self-chose class .full-width-fb to my main container to make sure the css only changes the behavior of my chosen full width containers
3. Main container is set to full width + contained with on the inner (you can choose whatever want on the inner container of course)
4. Main container has outer z-index set to 999 so the sidebar will go underneath when passing the container

That’s it basically. Combined with the CSS added to Custom CSS, you should now be able to have a full width container element while maintaining the sidebar that goes underneath the full width container when passing.

It works in mobile as well, since there is no sidebar (it’s actually pushed all the way down with the default setting already).

If you have questions, let me know. I hope it helps some people, I know it took me a few hours to get this to work how I wanted on blog articles where I have the default layout setup with a sidebar.

Cheers!

[David]

Thats great – i am wondering how this property works:

margin-left: calc(50% / .64 - 50vw) !important;

I assume that maths is considering the %width the sidebar occupies.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sjoerd]

The .64 is the actual percentage of the content container that can be set in the Customizer I believe. It’s a bit of trial error to find the right number, but using the dev. inspector it’s fast and easy.

So far I haven’t found problems yet. No issues on iPhone / iPad or Macbook 15 inch. Also tried my 27 inch windows pc and works great too!

[David]

Yeah – i expected as much – I assume .64 instead of .65 ( as customizer layouts are set to 5% increment ) accounts for the spacing around the container.

Nice solution but would require tweaking for different sidebar layouts – thanks again for sharing.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sjoerd]

Yes, I think it’s .64 because of the spacing, since I have it set to 65% / 35% ratio (content / sidebar) with a 40px gap if I am not mistaken.

Always happy to share 🙂

[David]

Thats cool – going to have a play with that 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts