CODEWITHSUNDEEP
htmlcssresponsive
bos570
bos570

Reputation: 1523

Responsive Email Template positioning Issues

I am trying to create a responsive HTML email template but I am having a little trouble figuring out how to get my elements to position themselves they way I want.

In my code below, you will see I have an image next to some text.

  1. When the screen gets to a small size (< 700px) I want the image to go above the text. Not below like it currently does.

  2. The current header section will not center over the entire row. It stays more left aligned:

    <tr>
   <td align="center">
     <h3>Thank you for reserving your deal with us!</h3>
    </td>
 </tr>

    Same goes for my horizontal row:

    <tr>
  <td>
     <hr>
  </td>
</tr>

    I can visually see the tr takes the whole width but the elements will not expand to fill them. Why is that?

My code:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  background-color: #e7e7e7;
}

#parentTable {
  background-color: fff;
  margin: auto;
  border-bottom: 10px solid #007dc3;
  -moz-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}

td {
  padding: 10px;
}

.row td {
  padding: 10px 20px;
}

.para {
  font-family: inherit;
  line-height: 22px;
  font-weight: 300;
  color: #3b3b3b
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 3px;
  -moz-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}

.code {
  background-color: #007dc3;
  color: white;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

.code td {
  padding: 10px;
  text-align: center;
}

.view-deal-button {
  color: fff;
  background-color: #007dc3;
  font-family: inherit;
  font-size: 15px;
}

.vehilce-img {
  position: relative;
}

.vehicle-img img {
  width: 400px;
}

.contact {
  font-size: 15px;
  padding: 5px;
}

#trademark {
  text-align: center;
  padding: 8px;
  font-size: 9px;
  margin: auto;
  color: #3b3b3b;
}

@media only screen and (max-width: 700px) {
  .wrapper table {
    width: 100%;
  }
  .wrapper .column {
    width: 100%;
    display: block;
  }
}
<table id="parentTable" width="100%" style="background: #fff">
  <tr>
    <td class="wrapper" width="600" align="center">
      <table cellpadding="0" cellspacing="0">
        <tr>
          <td align="center">
            <h3>Thank you for reserving your deal with us!</h3>
          </td>
        </tr>
        <tr>
          <td class="column" width="600">
            <table>
              <tr class="code">
                <td>
                  Your Personalised Code: <b>JNk1u7</b>
                </td>
              </tr>
              <tr class="row">
                <td class="para">
                  Please bring a printed copy of this email or simply note your personalized deal code so you have this information when you come in to pick up
                </td>
              </tr>
              <tr class="row">
                <td align="center">
                  <button class="view-deal-button btn" type='button'>View Your Deal</button>
                </td>
              </tr>
              <tr class="row">
                <td class="para">
                  Please feel free to be in touch, confirm any details of the deal, or ask any questions you may have. We look forward to meeting you soon!
                </td>
              </tr>
              <tr>
                <td class="para">
                  John Smith<br> General Sales Manager<br>
                </td>
              </tr>
            </table>
          </td>
          <td class="column" width="300">
            <table>
              <tr>
                <td align="center" class="vehicle-img">
                  <img src="https://092a1aab381dd581da25-7ddb065c39b8a73e05c6a8bc02fc8661.ssl.cf1.rackcdn.com//thumbnails/3HGGK5G43JM718575/9c127e805481e2ed1b5b17dde1621d92.jpg">
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <hr>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

View on JSFiddle

Upvotes: 1

Views: 104

Answers (1)

showdev
showdev

Reputation: 29168

I'll address your second point first. The table inside .wrapper has two columns (class="column"), but the first and last rows have only one column and they are not set to span two. That causes problems with the table layout. Here's an example using colspan:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  background-color: #e7e7e7;
}

#parentTable {
  background-color: fff;
  margin: auto;
  border-bottom: 10px solid #007dc3;
  -moz-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}

td {
  padding: 10px;
}

.row td {
  padding: 10px 20px;
}

.para {
  font-family: inherit;
  line-height: 22px;
  font-weight: 300;
  color: #3b3b3b
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 3px;
  -moz-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}

.code {
  background-color: #007dc3;
  color: white;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

.code td {
  padding: 10px;
  text-align: center;
}

.view-deal-button {
  color: fff;
  background-color: #007dc3;
  font-family: inherit;
  font-size: 15px;
}

.vehilce-img {
  position: relative;
}

.vehicle-img img {
  width: 400px;
}

.contact {
  font-size: 15px;
  padding: 5px;
}

#trademark {
  text-align: center;
  padding: 8px;
  font-size: 9px;
  margin: auto;
  color: #3b3b3b;
}

@media only screen and (max-width: 700px) {
  .wrapper table {
    width: 100%;
  }
  .wrapper .column {
    width: 100%;
    display: block;
  }
}
<table id="parentTable" width="100%" style="background: #fff">
  <tr>
    <td class="wrapper" width="600" align="center">
      <table cellpadding="0" cellspacing="0">
        <tr>
          <td colspan="2" align="center">
            <h3>Thank you for reserving your deal with us!</h3>
          </td>
        </tr>
        <tr>
          <td class="column" width="600">
            <table>
              <tr class="code">
                <td>
                  Your Personalised Code: <b>JNk1u7</b>
                </td>
              </tr>
              <tr class="row">
                <td class="para">
                  Please bring a printed copy of this email or simply note your personalized deal code so you have this information when you come in to pick up
                </td>
              </tr>
              <tr class="row">
                <td align="center">
                  <button class="view-deal-button btn" type='button'>View Your Deal</button>
                </td>
              </tr>
              <tr class="row">
                <td class="para">
                  Please feel free to be in touch, confirm any details of the deal, or ask any questions you may have. We look forward to meeting you soon!
                </td>
              </tr>
              <tr>
                <td class="para">
                  John Smith<br> General Sales Manager<br>
                </td>
              </tr>
            </table>
          </td>
          <td class="column" width="300">
            <table>
              <tr>
                <td align="center" class="vehicle-img">
                  <img src="https://092a1aab381dd581da25-7ddb065c39b8a73e05c6a8bc02fc8661.ssl.cf1.rackcdn.com//thumbnails/3HGGK5G43JM718575/9c127e805481e2ed1b5b17dde1621d92.jpg">
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <hr>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

For your first point, I recommend restructuring to use a flexible box layout so that you can leverage flex-direction to reverse the element order at put the image first. Here's my suggestion:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  background-color: #e7e7e7;
  margin: 0;
}

#container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#container>div {
  flex: 0 0 50%;
  padding: 1em;
  box-sizing: border-box;
  text-align: center;
}

h3 {
  text-align: center;
}
p {
  text-align: left;
}
.responsive_image {
  max-width: 100%;
}
.code {
  background-color: #007dc3;
  color: white;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  padding: 1em;
  text-align: center;
}
.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 3px;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
.view-deal-button {
  color: fff;
  background-color: #007dc3;
  font-family: inherit;
  font-size: 15px;
}


@media only screen and (max-width: 700px) {

  #container {
    flex-direction: column-reverse;
  }
  
}
<h3>Thank you for reserving your deal with us!</h3>

<div id="container">

  <div>
    <p class="code">Your Personalised Code: <b>JNk1u7</b></p>
    <p>Please bring a printed copy of this email or simply note your personalized deal code so you have this information when you come in to pick up.</p>
    <button class="view-deal-button btn" type='button'>View Your Deal</button>
    <p>Please feel free to be in touch, confirm any details of the deal, or ask any questions you may have. We look forward to meeting you soon!</p>
    <p>John Smith<br>General Sales Manager</p>
  </div>

  <div>
    <img src="https://092a1aab381dd581da25-7ddb065c39b8a73e05c6a8bc02fc8661.ssl.cf1.rackcdn.com//thumbnails/3HGGK5G43JM718575/9c127e805481e2ed1b5b17dde1621d92.jpg" class="responsive_image">
  </div>

</div>

I realize that this method may not be reliable for email templates. In that case, you might be able to put the image first in your code and float it to the right on desktop.

Upvotes: 1

Related Questions