Skip Navigation

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

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 6 replies, has 2 voices.

Last updated by Alok Sharma 11 months, 2 weeks ago.

Assigned support staff: Waqar.

Author
Posts
#2248711

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.

#2249385

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

#2249409

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.

#2249757

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.

#2251327

Hi Waqar,

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

#2252147

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;
}

#2253335

Hi Waqar,

Thanks, this is working perfectly fine now.