[Resolved] Why full-width layout doesn’t work for non GenerateBlocks blocks

[Alok Sharma]

Hi,

I am using Toolset Blocks and one common issue that I am facing is that Toolset Container full-width layout doesn’t work. But if I change the Content Layout to full-width in the Elements > Layout, then the entire page becomes full-width.

I then tried another Gutenberg Blocks add-on and faced the same issue, full-width layout doesn’t work.

However, GenerateBlocks Container full-width layout very much works.

Is there anything that I can do to make the block full-width without having to change the Content Layout to full-width? Obviously, I always have the option to use GB Container, but what if I would like to use a different block.

[Ying]

Is there anything that I can do to make the block full-width without having to change the Content Layout to full-width?

Why would you want to do that? If the page is not full width, those full width setting of blocks might cause a series problems, eg. horizontal scroll.

You can set the page to full width in page editor individually, it doesn’t require layout element all the time.
https://docs.generatepress.com/article/layout-metabox-overview/

However, GenerateBlocks Container full-width layout very much works.

I don’t quite get it as GB container respect the page width, even you set it to full width, it won’t go beyond the limit of the site container width.

[Alok Sharma]

Apologies if I was not clear with my query. Let me make it easy for you to understand.

At 1st, I am referring to Toolset Blocks for creating WordPress Archives or Content Templates.

Now, let’s suppose I want to display a full-width hero or full-width heading, I add the Toolset Container block (in the Toolset > WordPress Archive, not any other page or post) and in the container block layout options select full-width layout, but the container does not display full-width.

Please note that I do not want the contents of the entire template to be full-width, so it is meaningless to enable full-width layout for the entire template.

I have provided links to the screenshot in the private information.

[Elvin]

Hi there,

If you need to make a specific block go full-width, you can try WordPress’ full-width tool as shown here – https://share.getcloudapp.com/4guZ75RB

This option generally appears on all blocks within Gutenberg. This lets the blocks exceed the default max-width for containers added by the theme.

[Alok Sharma]

Hi,

Unfortunately, that option is not showing up, probably because it is provided in the block settings in the sidebar, the one you just saw in the screenshot.

Please refer to the block screenshot.

[David]

Hi there,

what Block is that ?

[Alok Sharma]

Hi,

Toolset Blocks Container block.

But never mind, I did some debugging and found that the following CSS which is required to display a full-width block was missing from the Toolset WordPress Archive:

.tb-container.alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
    width: auto;

I added this CSS and the block is now displaying full-width but at the same time, it is showing a horizontal scroll bar, a small space of around 2-3px to the right side of the screen.

So I modified the CSS to remove the extra horizontal space, but the problem is that on the mobile device, this horizontal space becomes reverse:

.tb-container.alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: calc(100vw - 8px) !important;
    width: auto;

So once again, I modified the CSS to make it work on mobile devices, but it only fixes the reverse space on mobile devices, not the extra space on the desktop:

.tb-container.alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	width: auto;

@media only screen and (max-width: 599px) {
	.tb-container.alignfull {
	max-width: 100vw !important;
	}
}

@media only screen and (min-width: 781px) {
	.tb-container.alignfull {
	max-width: calc(100vw - 8px) !important;
	}
}

Can’t figure out where am I going wrong.

[David]

Yep – that kinda of CSS is prone to horizontal overflow on some OS/Browsers as the browsers vertical scrollbar gets included in the viewport width.

Personally I would set the template content container to full width, which can also be done using a Layout Element as well.

And then use GB Container Blocks to build out the full width or contained sections.

Alternatively if its the entry-header that needs to be full width – then hook it in after_header or use a Block Element page hero.

[Alok Sharma]

Hi,

Never mind, I finally was able to fix it on my own.

Unfortunately, none of the solutions you suggested would work out for me as they are not present in Toolset WordPress Archive.

I do have the option to use GenerateBlocks Container, but there is an ongoing unresolved issue (https://community.generateblocks.com/t/dynamic-sources-toolset-integration/50/13) which strips out the GB Container block on the front-end.

It is very unfortunate that I had to go around digging and debugging everything on my own, which in fact is good for me, but a little support is always appreciated.

[David]

I am glad to hear you found a solution.

[Author]

Posts