Mobile Styles

What is it?

Want to make your email responsive to scale nicely for those using mobile devices? Here is how.

Setting a width trigger

Firstly choose what width you want to the responsive code to kick in. We usually set this to the width of the email, so it scales as soon as the screen width becomes less than the email width. In the default template below, the width is 600px. So if your email was 700px, you'd want to change all of the 600px values be 700px.

Boilerplate line 176

/*======== RESPONSIVE MOBILE ONLY STYLES ========*/

@media screen and (max-width:600px) { /* Change 600px to your max email width */

/*======== STYLE RESET AND EMAIL CLIENT SPECIFIC FIXES - (DO NOT EDIT) ========*/

body{width:100% !important; min-width:100% !important;} /* Force iOS Mail to render the email at full width. */

Sections

The first default styling is for the Section class. These rules add padding to the left and right of the email to prevent it from touching the edges. This may be something you wish to increase or even remove.

Boilerplate line 184

.Section{padding-right:10px !important; padding-left:10px !important;} /* Adds left and right padding to prevent email touching edges */

Section Blocks

Here we define the max width our email can be before scaling to 100% screen width. Change the 600px value to that of your email width.

Boilerplate line 185

.SectionBlock{max-width:600px !important; width:100% !important;} /* Change 600px to your max email width */

Responsive Block

This class should be assigned to every column that you wish to stack when the screen width is less than our default value of 600px. This is an important one!

Boilerplate line 186

.Responsive{max-width:600px !important; display:block !important;}/* Change 600px to your max email width */

Responsive Images

Similar to responsive blocks, add the class MobileImg to every image that takes up the full width of the email. This ensures it scales down with your email.

Boilerplate line 187

.MobileImg{height:auto !important; max-width:600px !important; width:100% !important;}/* Add this ID to all full width images. Change 600px to your max email width */

Your own styles

Have your own responsive code? Add it here.

Boilerplate line 189

/*======== (DO NOT EDIT - ENDS) ADD YOUR RESPONSIVE STYLES BELOW ========*/


		
    
} /*======== RESPONSIVE MOBILE ONLY STYLES ENDS ========*/