Menu icon Foundation
Emails with different width

I need to change the global-width of the email from the standart 680px to a custom 492px in Zurb Foundation for Emails.

I can't change it in settings.scss, because I need just one email to have this specific width.

The table.container {492px} doesn't work correctly.

Any help will be appreciated. Thanks!

widthemail

I need to change the global-width of the email from the standart 680px to a custom 492px in Zurb Foundation for Emails.

I can't change it in settings.scss, because I need just one email to have this specific width.

The table.container {492px} doesn't work correctly.

Any help will be appreciated. Thanks!

Wally Glenn over 1 year ago

1. In /src/assets/settings.scss, create a new class called .tinyemail:

.tinyemail {
	$global-width: 492px;

	& table.container {
	    background: #fefefe;
	    width: 492px;
	    margin: 0 auto;
	    Margin: 0 auto;
	    text-align: inherit;
	}
}

 

2. In /src/layouts/ create a new layout called tinyemail.html. Add this line to the body tag:

<body class="tinyemail">

3. In /src/pages/ create a new page called tinyemail.html. Add this line to the top:

---
layout: tinyemail
---

This allows you to leverage all of the customization you've already created for your email brand for the larger emails and use them with the tiny email. The only difference is the width. Place any specific customization for your tiny email in the .tinyemail class in settings.scss. You're good to go.

By creating specific classes in settings.scss, you can create a wide range of custom emails and still maintain your base email look and feel.

Good luck

ritariya 8 days ago

I was constantly searching through many sites to know how to change the width of email. But I did not get it from any site. Recently I have seen the post and I came to know about some codes to change the width of email. Thank for sharing the post.    Brake Time USA

Christian Baker 6 days ago

The straightforward approach to achieve the solution is to use width: 100%; and max-width: 960px  in your containers.