How To Create a Responsive Email Template

Posted By : Hema Chauhan | 28-Sep-2017

A media query is a tentative statement that holds extra CSS rules to change the arrival of the email when the conditions in the statement happen. For this email, we are going to use the same media queries that we used in our Responsive Template. You can check out the code right here:

 

 

    @media only screen and (max-width: 740px) { 
	}  
    @media only screen and (max-width: 549px) {      
    }      
    

 

 

The first media query will activate for screens of less than 740 pixels in width. The second query activates for screens of less than 549 pixels in width. The query that activates on minor screens comes last so that it will take come before over the earlier CSS rules in the block. We are going to position our way inner these media queries in the future steps. Then we can add the allocate selector to each style in the media queries. You will see this in effort in the next step. 2. Restraint the Width of the Container Element. We need to restraint the width of the containing element, so that the email slims down to a particular column on minor devices.



 
 width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center" //define in table tags. 
  
@media only screen and (max-width: 640px)  {
  .deviceWidth1 {width:440px!important; padding:0;}  
}
      
@media only screen and (max-width: 479px) {
   .deviceWidth2 {width:280px!important; padding:0;}
}   

 

 

Resizing the container element is not the only thing we need to do to make the email reach the correct width. Any image or table that is too broad for the new table width will cause it to stretch to accommodate the broadr element. 3. Add New Classes to Relevant Images. Some of the images in this email are so broad (more than 440 or 280 pixels broad, respectively). We are going to add some special classes to help us resize them.

  
 //in TD section.  

Notice that we removed the height attribute. If we quit that height attribute, the image will consider stretched to reach that height. On the other hand, if we do not give a height, it will reactive take its ratio. Now we are going to further the size of these images in the media queries, like this:

 

 

@media only screen and (max-width: 640px)  {
    .devicesWidth {width:440px!important; padding:0;}
    .devicesWidth2 {width:300px!important; padding:0;}
    .devicesWidth3 {width:440px!important; padding:0;}
    } 
@media only screen and (max-width: 479px) {
	.deviceWidth {width:280px!important; padding:0;}
	.deviceWidth2 {width:200px!important; padding:0;}
   }          

 

 

When you resize the window, you should see the blue bar and horizontal rules get small enough to accommodate the new responsive behaviors. 4. Make some TDs Display: Block. In this case, we have a sidebar on the right that will need to move under the rest of the content for the minor views. Luckily for us, this is actually a pretty easy trick. We will just add a style to the containing TDs, in this case there are two of them. The TD containing the content on the left is width 58%, and the right side TD is width 35%. With this class, each of these TDs will display in its own vertical space instead of be sitting side by side. They are still constrained by the percent width listed inline, so we'll have to overwrite that in the next step. 5. Fix Percent-Based TDs. Now our two main content TDs look like this:

 

 

    
width="58%" align="left" valign="top" class="block_td" //define in TD tgs

adding another class for make the width 100%.

 @media only screen and (max-width: 640px)  {
    .deviceWidth1 {width:440px!important; padding:0;}
    .deviceWidth2 {width:300px!important; padding:0;}
    .deviceWidth3 {width:440px!important; padding:0;}
    .block_td {display: block;}
    .percent_td {width: 100% !important;}
}
      
 @media only screen and (max-width: 479px) {
    .deviceWidth {width:280px!important; padding:0;}
    .deviceWidth2 {width:200px!important; padding:0;}
    .deviceWidth3 {width:380px!important; padding:0;}
}     

 

 

6. Finishing Touches. This is the code that creates the border effect:

 

 
width="5%" style="border-right:2px solid #95989a" //define in TD tags.    

 

 

So we will adding the "solid" class to it. We'll overwrite the border to 0 in CSS. Last, we need to reset the size of some percent based TDs that are now too big. We will set these to be 155px broad, slightly larger than the image they contain. Becomes:

 

 

  
width="43%" class="pic_td">

 

 

Give each of the following TDs (with 57% width) the "percent_td" class so that they'll occupy the remaining width of the row. And now the last bit of CSS.

  
@media only screen and (max-width: 640px)  {
          .deviceWidth {width:440px!important; padding:0;}
          .deviceWidth2 {width:300px!important; padding:0;}
          .deviceWidth3 {width:440px!important; padding:0;}
          .block_td {display: block;}
          .percent_td {width: 100% !important;}
          .pic_td {width: 155px !important;}
          .solid {border-right: 0px !important;}
          .hidden {display: none !important;}
      }
      
  @media only screen and (max-width: 479px) {
          .deviceWidth {width:280px!important; padding:0;}
          .deviceWidth2 {width:200px!important; padding:0;}
          .deviceWidth3 {width:380px!important; padding:0;}
      }  

 

 

You should now have a pretty good looking responsive email template.

 

 

About Author

Author Image
Hema Chauhan

Hema is a bright UI designer, having knowledge of core php, HTML, CSS. Her hobbies are interacting with people, listening to music and dancing.

Request for Proposal

Name is required

Comment is required

Sending message..