Responsive Two Column HTML Email Template

Question

I have developed an HTML Email template and 2 column designs are also there. And in my case one column is image and the other is text and further, the text consists of a heading and a paragraph. And as all styles are inline so I am facing issues on different screens.

picture one is for normal screen:

and Picture 2 is for big screen:

So its all about the font If I decrease the font it shows very small on some devices and if I increase, Two column design brokes.

Here is my code:

<table border="0" cellpadding="0" cellspacing="0" width="960" align="left" style="width: 960px; width: calc(100%); max-width: 960px; background-color: #301f0d; color:#fff;" >
   <tr>
      <td style="margin: 0px; padding: 0; text-align: center;">
         <div style="margin:0; max-width:960px; min-width:260px;">
            <div style="text-align:center; font-size:0;">
               <!--Left column-->
               <div style="display:inline-block; font-size: 16px; text-align:center; vertical-align:top; width:50%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(50%); width:calc(230400px - 48000%); min-width: calc(50%);" width="480" align="left">
                  <h1 style="font-size:calc(70% + 1vw); margin: 90px 10px 10px; text-transform: uppercase; text-align: center;padding: 0 12px;">Englestead Canyon Trip Report</h1>
                  <p style="font-size:calc(60% + 0.5vw); margin: 10px 10px 10px; text-align: center; line-height: 1.6;padding: 0 12px;">Ambassador Kenyon Virchow shares tips and tricks for navigating this epic canyon in Zion National Park. </p>
                  <a target="_blank" style="background-color:#301f0d;text-transform:uppercase;border: 2px solid #fff;padding: 0.4em 0;color:#fff;text-decoration: none;font-size:calc(50% + 0.5vw); font-weight:bold;display:inline-block; margin:10px 0 20px;width:40%;" href="http://www.example.com">Read More</a>
               </div>
               <!--Right Column -->
               <div style="display:inline-block; font-size:16px; text-align:center; vertical-align:top; width:50%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(50%); width:calc(230400px - 48000%); min-width: calc(50%);" width="480" align="right">
                  <!-- Image -->
                  <p style="margin: 0px; text-align: center; background-color:#301f0d;">
                     <a target="_blank" href="http://www.example.com">
                     <img src="http:/image.jpg" alt="alt" style="width: 480px; max-width: 480px; display: block;" width="480" border="0">
                     </a>
                  </p>
               </div>
            </div>
         </div>
      </td>
   </tr>
</table>

If you use nested tables for each column instead of div inline blocks it would help i guess.. — MJN, Aug 15 '18 at 19:59
or for better compability of different clients browsers you can use framework such as https://mjml.io but it completely depends on your needs — MJN, Aug 15 '18 at 20:05
In the nested table I faced more issue in outlook for two column. — Noman Ahmad, Aug 15 '18 at 20:09
yes outlook does always have issue mostly but try framework it would help you better is supporting clients — MJN, Aug 15 '18 at 20:11
You can use media queries to change font sizes in mobile devices (>95% devices support media queries) or you can stack the columns or reverse stack the columns. — Syfer, Aug 16 '18 at 02:51

score 1 · Answer 1 · answered Aug 16 '18 at 05:24

<table border="0" cellpadding="0" cellspacing="0" width="960" align="left" style="width: calc(100%); max-width: 960px; background-color: #301f0d; color:#fff;" >
   <tr style="background-color:#301f0d;">
      <td style="width:50%; text-align: center; padding:5%;">
      
        <h1 style="font-size:calc(70% + 1vw); text-transform: uppercase; text-align: center; margin:0;">Englestead Canyon Trip Report</h1>
        <p style="font-size:calc(60% + 0.5vw); margin-top: 10px; text-align: center; line-height: 1.6;">Ambassador Kenyon Virchow shares tips and tricks for navigating this epic canyon in Zion National Park. </p>
         <a target="_blank" style="background-color:#301f0d;text-transform:uppercase;border: 2px solid #fff;padding: 0.4em 0;color:#fff;text-decoration: none;font-size:calc(50% + 0.5vw); font-weight:bold;display:inline-block; margin-top:10px;width:40%;" href="http://www.example.com">Read More</a>
      </td>
      
       <td style="width:50%; text-align: center; font-size: 0; background:url('http://thechurchontheway.org/wp-content/uploads/2016/05/placeholder1.png') no-repeat center; background-size: cover;">
        <a target="_blank" href="http://www.example.com" style="font-size: 0;">
           <!-- <img src="http://thechurchontheway.org/wp-content/uploads/2016/05/placeholder1.png" alt="alt" style="width: 100%;"> -->
        </a>
      </td>
   </tr>
</table>

https://jsfiddle.net/Sampath_Madhuranga/e4cqnz6h/28/

I have made adjustments in layout, where you defines table structure and updated inline styles.

Try this code.

@Noman Ahmad, Above I have provided an answer for you. Check and let me know whether it works now. Thanks. — VSM, Aug 16 '18 at 05:26

score 0 · Answer 2 · answered Aug 15 '18 at 18:07

0

Apply percentage values for all dimensions instead of pixel values or use vw (eg:- 0.5vw) values for all elements such as font size, margin etc.

Sometimes this maybe works. Let me know the result please.

Thanks

answered Aug 15 '18 at 18:07

VSM

1,765
8
18

I have tried all possibilities regarding different font/margin dimension units. it gives the same results. – Noman Ahmad Aug 15 '18 at 18:46

score 0 · Answer 3 · answered Aug 16 '18 at 06:39

<!DOCTYPE html>
     <html>
       <head>
      <title>Page Title</title>
   </head>

  <body>
 <style>
*,
 ::after,
 ::before {
    box-sizing: border-box;
}

.no-gutters>.col,
.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

.block {
    padding-top: 90px;
    padding-bottom: 100px;
}

.col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.max-container-map-left {
    position: relative;
    z-index: 1;
}

.form-footer {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.get_more_info .form-footer {
    position: relative;
}

.max-container-map-left {
    max-width: 640px;
    padding: 0px 50px;
    margin: 0 0 0 auto;
}

.get_more_info {
    background-color: #252525;
    color: #fff;
    position: relative;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.get_more_info h2 {
    font-size: 40px;
    color: #fff;
    margin-bottom: 30px;
    font-weight: bold;
}

.get_more_info h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
    padding-top: 20px;
}

.get_more_info .form-footer {
    position: relative;
}

.get_more_info .form-footer:before {
    content: "";
    opacity: 0.75;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
}
</style>
<div class="get_more_info">
    <div class="row no-gutters">
        <div class="col-md-6 block">
            <div class="max-container-map-left">
                <h2> Get More Info </h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-footer block" style="background-image: 
       url(http://via.placeholder.com/900x900);">
            </div>
        </div>
    </div>
   </div>
  </body>

it should be inline styling. – Noman Ahmad Aug 29 '18 at 19:53 — Noman Ahmad, Aug 29 '18 at 19:53

Responsive Two Column HTML Email Template

3 Answers3