Menu icon Foundation
Adjusting row width for high resolutions

At a max row width of 62.5rem, a site that I'm working on looks fine width wise on a laptop, but when you look at it on a larger screen the site looks way too skinny. When I adjust the max row width to 80rem when viewing on a larger (2560*1440) screen it looks better.

I suppose I can add a media query that will change the row width to 80rem, e.g. for screens of 2000px+ etc.

Has anyone else come across this, and are there any other ways to get a foundation site to scale up better for higher resolutions.

Thanks, Ben

gridrowhigh resolution

At a max row width of 62.5rem, a site that I'm working on looks fine width wise on a laptop, but when you look at it on a larger screen the site looks way too skinny. When I adjust the max row width to 80rem when viewing on a larger (2560*1440) screen it looks better.

I suppose I can add a media query that will change the row width to 80rem, e.g. for screens of 2000px+ etc.

Has anyone else come across this, and are there any other ways to get a foundation site to scale up better for higher resolutions.

Thanks, Ben

Joel Kinzel over 4 years ago

Nope, you're spot on. You'll need to create another/utilize the XXLarge queries and set the max-width to something higher.

FYI, 1rem = 16px in case you did not know meaning your 80rem = 1280px (minus the gutters, so 1250px for content).