Archived topic
Better understanding major GP HTML Div Elements Layout values
1 reply · Started by michael on October 15, 2020
Why does page size in Google-Chrome-Inspect picture show width=375px, BUT the Class=page and ID=page BlueHighlight Rectangle is visually a width=1/2 375px, NOT 375??? (I think it should show entire device-screen width as BLUE)
I am looking for Best Practices on setting Container and Parent Container WIDTH values. I ASSUME that the Outer DIV Widths (eg the GP ID=page and CLASS=page) should be set to 100% Device-Screen-Width, and all MY custom Child DIV-Widths set to percentages of that FULL WIDTH PARENT ???????
Please Help.
Michael
Hi,
The best practice for setting the content container with is done through Appearance > Customize > Layout > Container and set your content container width there.
You can also set your content width on Layout Elements which can be found on Appearance > Elements when GP Premium has Elements module enabled.
https://docs.generatepress.com/article/layout-element-overview/
There's also a Layout Metabox if you want to set the content width per page.
https://docs.generatepress.com/article/layout-metabox-overview/
As for setting widths for specific class selectors, avoid using values that are more than 100%.
It'll affect how the layout looks especially when you use margins and transformations. I've checked your site and found that you have CSS codes that use 220%, and this will surely cause things to look weird.
As for images having half the width of their containers, it's most likely due to it having a set width of 50% or its display size used coincidentally looks like half the container width.
