[Resolved] Full width not working on 2020 theme

[Author]

Posts

[randallH-3]

Full width on Layouts. not working on 2020 theme. Tried finding it in CSS, but can't. How to fix?

[Waqar]

Hi Randal,

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

To suggest the best way forward, I'll need to understand exactly what is not working.

Can you please share temporary admin login details along with the link to a page with this full-width layout?

I'll be in a better position to guide you accordingly.

Note: I've set your next reply as private.

regards,
Waqar

[Waqar]

Hi Randal,

Thank you for sharing the admin access.

I noticed that the theme includes the following CSS code at line# 3551 of its main "style.css" file:
( hidden link )

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 58rem;
    width: calc(100% - 4rem);
}

This block adds a "max-width" and "width" values to the immediate container element inside the div with class "entry-content" if specific classes don't exist with that element.

To make a certain row cover full-width, you can assign "is-style-wide" class in its settings, as shown in these screenshots:

Screenshot 1: hidden link
Screenshot 2: hidden link

I hope this helps and to check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

regards,
Waqar

[randallH-3]

Edited the CSS earlier, still need to test your solution.

Where can I edit the Header and Footer? Can't find it in the Layout

[Waqar]

Hi Randal,

If you're planning to design the complete structure of the website, with a standard/repeating header, footer and sidebar sections, and dynamic content sections, you can use the layout hierarchy feature, as explained in this guide:
https://toolset.com/documentation/user-guides/layouts/hierarchical-layouts/

Please let me know if any specific point or step is not clear.

regards,
Waqar

[randallH-3]

This solved the full width problem:

 
.full-bg{max-width:100% !important;}
.container{max-width:100% !important;}

Now the problem is that the original header and footer still shows. Is that normal?

Thank you for your help.

[Waqar]

Hi Randal,

Thanks for the update and yes that custom CSS code solution is fine too.

It is normal that the theme's original header and footer sections keep showing, as Toolset plugins only target the content areas.

I noticed that you've now included some additional custom CSS code to hide them, which should work.

Alternatively, to remove those sections from the output completely, you can remove their code from the theme's "header.php" and "footer.php" files.

regards,
Waqar

[randallH-3]

My issue is resolved now. Thank you!