Noman Ahmad
Noman Ahmad

Reputation: 360

Responsive Two Column HTML Email Template

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:

enter image description here

and Picture 2 is for big screen:

enter image description here

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>

Upvotes: 0

Views: 12653

Answers (3)

RamNiwas Sharma
RamNiwas Sharma

Reputation: 347

<!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>

Upvotes: 0

VSM
VSM

Reputation: 1785

<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.

Upvotes: 1

VSM
VSM

Reputation: 1785

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

Upvotes: 0

Related Questions