top news websites page dimensions, readable area widths, fonts and sizes

yahoo news post dimensions
ever wondered what the top news sites did for usability and readability?  I did too, and here is what I found.

Astra Settings

Adjust the blog container spacing

WP Customizer > Blog > Single Post

Set Outside & Inside Container left and right spacing to 0.  This is not super needed for the desktop size, but on the phone size it allows the content area to expand to take almost the full width of screen.

This will make the container for both page and posts have no spacing. It may be easier and worth it to just leave all the fields blank. 

Astra CSS

.post .entry-content {max-width: 760px; margin: auto;}

This should limit just the width of the posts. There may need to be some testing to ensure that the CSS setting is correct.

Note the width is set to 760 that means the readable area will become 740px wide, which seems like a reasonable width. 


Share via
Copy link
Powered by Social Snap