[Resolved] Container full-width not working in GeneratePress Premium

[Author]

Posts

[Alok Sharma]

Hi,

I want to display Toolset Container full-width in GeneratePress Premium, but it is not working.

In have enabled Full width in Container > Advanced > Block Alignment, but it didn't work.

I tried the solution mentioned over here https://toolset.com/forums/topic/full-width-background-using-generate-press-theme/#post-954314, but that too didn't work.

If I enable full-width layouts in GeneratePress Premium, then the entire content width becomes full-width, globally.

Is there any fix to this?

Thanks.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Can you please share a link to an example page where this Toolset "Container" block can be seen?

I'll be in a better position to guide you with the next steps, accordingly.

regards,
Waqar

[Alok Sharma]

Hi Waqar,

You can see it for yourself over here hidden link

I have added the login in this reply https://toolset.com/forums/topic/checking-value-returned-by-wpv-relationship-filter-using-conditional-block/#post-2249405

You will find two containers, the 1st one is created using GenerateBlocks which is not working, and I have opened a separate thread for it. You may please ignore it and check the 2nd container created using Toolset.

[Waqar]

Thank you for sharing these details.

You can include this CSS code, in the archive's "Custom CSS":

.tb-container.alignfull {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}

After this, any Toolset "Container" block with the "full-width" alignment, will cover the full width of the screen.

[Alok Sharma]

Hi Waqar,

It is working, but it adds a very small amount of horizontal scrolling.

[Waqar]

Thanks for writing back.

The horizontal scrollbar can show on some devices and browsers (especially on the Mac OS), due to the width/space occupied by the vertical scrollbar on the right side.

To overcome this, you can subtract 8px from the total width, updating the code from the reply to:

.tb-container.alignfull {
width: calc(100vw - 8px);
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}

[Alok Sharma]

Hi Waqar,

Thanks, this is working perfectly fine now.