Menu icon Foundation
What happened to 1200px width?

I had previously used Foundation 3 and 4, and was just getting a new site set up with version 5. I immediately noticed that the full width is narrower than in previous versions--at least, for the monitor I'm using (which hasn't changed).

Did Foundation 5 reduce the 1200px full width to something else? I see several statements in the foundation.css file, ranging from small to xxlarge. Are these replacing the"@media only screen and (max-width: 1079px) blah blah" calls in app.css (which I had previously used very successfully) or are they supplementing them in some way?

FYI: This was a custom build, but I assumed the width would simply default to the widest possible/recommended. Is this not the case?

A little confused here...

full widthwidth1200pxlarge-12large screen

I had previously used Foundation 3 and 4, and was just getting a new site set up with version 5. I immediately noticed that the full width is narrower than in previous versions--at least, for the monitor I'm using (which hasn't changed).

Did Foundation 5 reduce the 1200px full width to something else? I see several statements in the foundation.css file, ranging from small to xxlarge. Are these replacing the"@media only screen and (max-width: 1079px) blah blah" calls in app.css (which I had previously used very successfully) or are they supplementing them in some way?

FYI: This was a custom build, but I assumed the width would simply default to the widest possible/recommended. Is this not the case?

A little confused here...

Malou Geurts about 5 years ago

When you download the framework the width is based on em's. Which means the total width is dictated by your browser settings (most browsers equate 1em to 16px). So, if you're looking for a 1200 full max width you could do 1200/16=em and compare that width to the settings when you download the framework.

Designer about 5 years ago

Thanks. I figured out that I had left that setting as default (62.5em) so I changed it in the foundation.css to 75em.

Wouter Biegstraaten about 5 years ago

hey folks

using f5: 75em does not deliver a 1200px wide row in my chrome browser (33).
it does however work in ff and safari. anybody any clue?

Wing-Hou Chan about 5 years ago

Hey Wouter!

Could you post a link to your site? It would help diagnosis!

Wouter Biegstraaten almost 5 years ago

hey Wing-Hou

sorry for the late reply but it seems that chrome has a different way of measuring... in ff the grid does do 1200px.

Thansk..

solved

Marc McGee almost 5 years ago

Can the change to the width from 62.5 to 75 be made in the existing style sheet, or would I have to change on the customize form and down load all new css and related files?

Wing-Hou Chan almost 5 years ago

@Wouter!

No worries. Glad it's solved!

@Marc!

I assume you are referring to foundation.css when you say "existing stylesheet". It's sometimes best to make changes to Foundation's core in a separate stylesheet. The CSS is:

.row {
  max-width: 75rem;
}

If it is a must to change it in Foundation's core you will need to go to Line 99 in foundation.css.

Marc McGee almost 5 years ago

Yes, that's what I was referring to. So it's OK for to to just add that modified style to my own stylesheet? I don't have to go back and re-download all new files after entering 75 in the form? Just didn't know if other calculations were made to the stylesheet before download based on that entry into the form.

Wing-Hou Chan almost 5 years ago

@Marc

Good you asked that question otherwise contain-to-grid will be messed up. XD

I just looked at Foundation's CSS. It's a real shame you are missing out on the amazingness of SCSS. Give it a try and you'll love it.

I found you also needed to change Line 3808. So the following lines are the ones you should change:

Line 99
Line 3808

Marc McGee almost 5 years ago

SCSS is definitely on the agenda for my next project. For now, I'm OK with the size, but good to know that I have the option of making it wider with a few changes to the CSS. Thanks for the tips.