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
Supporter
Languages:
English (English )
Timezone:
Asia/Karachi (GMT+05:00)
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
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
Supporter
Languages:
English (English )
Timezone:
Asia/Karachi (GMT+05:00)
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.
Hi Waqar,
It is working, but it adds a very small amount of horizontal scrolling.
Waqar
Supporter
Languages:
English (English )
Timezone:
Asia/Karachi (GMT+05:00)
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;
}
Hi Waqar,
Thanks, this is working perfectly fine now.