Menu icon Foundation
What's the logic behind max-width 62.5 em?

My initial load of foundation 5 looks puny on my monitor. Not very wide. My browser font size preference is 13 and I understand that changing that font size preference make the my site wider.

I'm not really wanting a 100% width for the entire site, and guess the most users will have their browser font set to somewhere between 13 and 16. row max-width at 62.5em is just too narrow on my system.

Can I change that 62.5 to something like 75 em or will that mess up foundation?

Foundation 5max-width

My initial load of foundation 5 looks puny on my monitor. Not very wide. My browser font size preference is 13 and I understand that changing that font size preference make the my site wider.

I'm not really wanting a 100% width for the entire site, and guess the most users will have their browser font set to somewhere between 13 and 16. row max-width at 62.5em is just too narrow on my system.

Can I change that 62.5 to something like 75 em or will that mess up foundation?

This post has been closed. No new replies can be added.

George over 5 years ago

The logic behind 62.5em is that it should equate to 1000px wide on most systems.

Best way to customise is using the sass vars, that way you know you're not going to break anything.

http://foundation.zurb.com/docs/components/grid.html#customize-with-sass

Marc McGee over 5 years ago

I really appreciate your quick response. I was thinking it should be about as wide as you mentioned too. I'll review the information at the link you sent. Maybe I set something up wrong.
I'm only just starting out here with F5, and set up one div and then applied a background color in the large-12 columns so I could see the width of the container. I measured the width of that background color from a screen shot and it's about 792 px wide. Doesn't make sense.

Rafi Benkual over 5 years ago

We leave it up to you to to change any available setting in the setting file or to customize your own overrides. When you create a row, it is 1000px width by default in 12 total columns.

You change the row width in the setting file or just download the grid the way you want it here:
http://foundation.zurb.com/develop/download.html

Also, if you want a div to expand the full width of the screen, don't wrap it in a row. Thats the easiest.

Marc McGee over 5 years ago

Thank you for the response. Very helpful.

1000 px wide for the row would actually be perfect. I'll review my code and see if I messed something up. Could be Mac Safari—though I never change the default preferences for appearance.

My apple display is set to 1680 x 1050. Would this affect how wide 62.5em is?

Marc McGee over 5 years ago

I found that 16 px = 1 em. Therefore, 16 x 62.5 = 1000px.

I changed my font size preference in Safari to 16, and voila... the 12 columns displays 1,000.

Hmmm? If someone has their Safari font size preference set to 12, then the site will appear much smaller on their screen.

Jacob Moen over 5 years ago

Marc:
If people set their font size preference, your site should respect that.
So that's expected behavior. :)

Marc McGee over 5 years ago

I agree. I'm just not used to having a font size preference dictate the width of a website. Since safari on my system was set to 12 – for whatever reason — my site in turn was displaying small. Proportionately it was correct though.
If by chance my client has the same small setting for their font, I want to be able to provide and educated answer when they ask, "Can the site be any wider?"

Thanks for the feedback Jacob. Much appreciated.