[Resolved] Narrow content using layout element

[Jamal]

Hi

Im trying to set 1000px wide layout for site container and 800px for all pages except front page and i have encountered some issues when using sections. The content is floated left and doesn’t respect container padding.

Seems like .sections-no-sidebars.generate-sections-enabled .container.grid-container with 100% max width
is overriding body .grid-container width.

Adding body .grid-container { max-width: 1000px !important; } to child theme fixes above issue.

The /about page is with sections while the /events page is without sections and behaves as expected.

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

Are you using the content width option in the Layout Element?

It looks like this CSS is causing the issue:

.generate-sections-enabled.one-container .site-main {
    margin: 0 !important;
}

Trying to remember what issue I was solving when I added that CSS – I’ll do some tests.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jamal]

Are you using the content width option in the Layout Element?

Yes Tom im using that.

Another issue im having is with drop down menu in off canvas panel. When drop down arrow is removed,impossible to use the menu even when navigation drop down set to click menu item. Let me know if its best to open another thread for this. Thanks !

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

I believe I have this fixed in rc.2.

The dropdown arrows are definitely necessary in some cases, but they shouldn’t be if the click type is set to menu item. Same site?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jamal]

You are the boss, thanks man.

Regarding the navigation,its the same site. Now i have set drop down to hover and kept the dropdown arrow on mobile but incase if there are some tweaks that can be done here is what happens when i click the custom link to reveal the submenu.

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

And that happens when the dropdown is set to “Click – Menu Item”, or only hover?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jamal]

Its the same behavior whether its set to hover, click menu or arrow.

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

What if you set the URL to #?

Also, I have the original issue fixed I believe. Will be releasing rc.2 on Monday, but can send it to you now if you’d like to give it a go? If so just shoot me an email: https://generatepress.com/contact

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jamal]

What if you set the URL to #?

Its working alright, thanks and sorry for the false alarm. Just sent you an email for rc.2

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Leo]

Sent 🙂

Let us know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jamal]

Solved. Thank you all for the all round excellent customer support.

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

Awesome! Thanks for testing 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jamal]

Hi again

Just an observation, to keep consistent page layout between pages without and with sections,i had to add 80px to my desired width inorder to compensate for

.generate-sections-inside-container {
    padding-left: 40px;
    padding-right: 40px;
}

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

Sections themselves have a left/right padding option. They should inherit your content padding by default – I’ll look into that.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jamal]

Hopefully i haven’t wasted your time so i will clarify what i mean. I have site container width at 1000px and would like to have some pages at 800px wide. On the pages where i use the sections editor the width becomes 720px because of the sections padding. And i have just realized im not solving anything by trying to compensate for the extra sections padding.

I think currently my only alternative will be to add a class that removes sections padding whenever added unless you can come up with a genius solution. Thanks

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Author]

Posts