Menu icon Foundation
Re-size Foundation for Email width

Hi all,

 

I think this question has been asked before, but I couldn't really understand the answer...basically I want to re-size the Foundation for Emails (2.0) width such that the desktop-version comes in at 600px wide, and that the breakpoints happen around 480px to mobile view.

 

I know that I'd need to resize the container width...but what else do I need to modify?

foundation 2.0

Hi all,

 

I think this question has been asked before, but I couldn't really understand the answer...basically I want to re-size the Foundation for Emails (2.0) width such that the desktop-version comes in at 600px wide, and that the breakpoints happen around 480px to mobile view.

 

I know that I'd need to resize the container width...but what else do I need to modify?

Luke over 3 years ago

If your using sass you can easily change the settings in the _settings.scss file.

Total with of the email is changed from $global-width: 580px to $global-width: 600px

and your mobile is a % of 600px so you would change $global-width-small: 95% to $global-width-small: 80% to get 480px wide for mobile.

Ian Daly over 3 years ago

You might get scroll bars on a 600px wide layout unless you remove the margins on the left and right of the template. I think the 580px is to take these into account. You don't want your emails wider than 600px ever.