[Support request] Recommended container width

[Mary]

Hi, I’m wondering what the recommended container width is for blog posts that are content only, no sidebar – so that they remain mobile-friendly.

Mine is currently set at 1100 but seems too wide.

Is there a recommended width?

My home page is built with Elementor, but the blog posts are what I’m referring to. Seem too wide….

Thank you.

[David]

Hi there,

Perfect reading lengths are measured in characters and i usually go for around 60-65 characters.
For your current layout and font settings that would need a container width of around 800px.

You can change just the content width of the single post using the layout element:

https://docs.generatepress.com/article/layout-element-overview/

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

[Kostas]

hi,
i am also wondering about the recommended layout container width.
I am working on 4K laptop and 27″ screen.
If i set this to 1920px then i notice that in older laptops like Macs (1280 x 800 px) the left right padding disappear and the content sticks left and right.

If i set the layout container width size to let’s say 1280px then in the 4k screens the content looks stacked in the middle of the screen with huge left-right spaces.

What would you suggest for such cases?
Would it be possible to add % values for the container width so the container resizes appropriately in each screen and keeps at least a reasonable padding left and right?

[David]

Hi there,

content will only touch the sides of the screen if there is no Padding on the Container.

Padding may have been removed in the Customizer > Layout > Container

OR

if you set the Content Container to either Contained of Full Width:

https://docs.generatepress.com/article/content-container/

You should leave the Content Container as Default if you want to keep the padding.

OR

if you need a Full Width layout then the padding needs to be added to your content, eg. using a GenerateBlocks Container Block

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

[Kostas]

hi David,
thanks for clarifying the padding topic.

Please provide some insight for the other part of my question:

How would you suggest to deal with the fact that by setting a fix value container width this will look either too small or too big depending to the screen resolution. Is there a specific reason you only set this in px and not also in % values in the customizer?

[David]

if you want to utilise as much of the screen width as possible then the simplest solution is to:

1. Set the Customiser Container Width to a really high value, you can type into the field eg. 10000
2. Set the left and right padding eg. 40px

That way the content will fill the width of any size screen but maintain a fixed padding.

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

[Kostas]

nice!
this is what i was looking for,
thanks!

[David]

Glad to be of help!

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

[Author]

Posts