Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Holly Logan
Holly Logan
7,142 Points

Help to make email signature responsive

Hi

I am still learning HTML and CSS. I have made this simple email signature but need the employee details (to the right of the vertical bar) to appear underneath the logos, when on mobile. How do I achieve this? Thanks in advance.

<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr><td valign="top" style="padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 8px; border-top: 0; border-bottom: 0: border-left: 0; border-right: solid 1px #a9a9a9"><img id="preview-image-url" src="https://www.dropbox.com/s/wyw7cf00r7gasyy/tn-logo-email.png?raw=1"></td>
<td style="padding-top: 0; padding-bottom: 0; padding-left: 12px; padding-right: 0;">
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr><td colspan="2" style="padding-bottom: 5px; color: #54c2ca; font-size: 18px; font-family: Arial, Helvetica, sans-serif;">Employee Name - BCA, CA</td></tr>
<tr><td colspan="2" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><i>Chartered Accountant</i></td></tr>
<tr><td colspan="2" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif; padding-top: 5px;"><strong>True North Chartered Accountants</strong></td></tr>
<tr>
  <td width="20" valign="center"><img id="preview-image-url" src=" https://www.dropbox.com/s/79zirqm5437l6pj/true-north-phone.png?raw=1"></td>
  <td valign="top" style="vertical-align: top; color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">01 234 5678</td>
  </tr>
<tr>
  <td width="20" valign="center"><img id="preview-image-url" src=" https://www.dropbox.com/s/i3hqbkukslgbcln/true-north-address.png?raw=1"></td>
  <td valign="top" style="vertical-align: top; color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">1234 Anywhere Street, Anywhere 1234 or PO Box 1234, Anywhere 1234</td>
  </tr>
<tr>
  <td width="20" valign="center"><img id="preview-image-url" src=" https://www.dropbox.com/s/rxm46999l4nfjvk/true-north-web.png?raw=1"></td>
  <td valign="center" style="vertical-align: top; color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><a href="http://www.google.co.nz" style=" color: #f0a81a; text-decoration: none; font-weight: normal; font-size: 14px;">www.company.com</a>&nbsp;&nbsp;&nbsp;<img id="preview-image-url" src="https://www.dropbox.com/s/e6zkvg1ajezc959/true-north-email.png?raw=1">&nbsp;<a href="mailto:employee@company.com" style="color: #f0a81a; text-decoration: none; font-weight: normal; font-size: 14px;">employee@company.com</a></td></tr>
</table>
<table><tr><td style="font-size: 10px; font-family: Arial, Helvetica, sans-serif; font-style: italic; padding-top: 5px;">WARNING: The information in this email is confidential and may be privileged. If you are not the intended recipient, you must not read, use, copy or distribute this email or attachment, as such action may be unlawful. If you have received this email in error, please notify us immediately by return email, facsimile or telephone and delete the message. Where addressed to a client, any views expressed or advice given in this communication are subject to our engagement terms and conditions. Any views expressed in the message are those of the individual sender, except where the sender specifically states them to be otherwise.</td></tr></table>

7 Answers

James Matthews
James Matthews
21,610 Points
James Matthews
James Matthews
21,610 Points

Hey Holly!

Just as a couple of pointers...Are you sure you want to use tables when laying out this page? Tables are a lot less flexible than simply using div tags etc, and are semantically incorrect if being used for page layout purposes...especially if you're making responsive web pages.

I suggest re-structuring the HTML and also use a separate CSS stylesheet so that it doesn't clog up your markup. You can use media queries to get your desired layout for smaller screens:

@media  screen and (max-width: 480px) {
    //Use this layout for screens no larger than 480px...
}
James Matthews
James Matthews
21,610 Points
James Matthews
James Matthews
21,610 Points

Hiya Holly,

Yeah you're right, my apologies! Anyway,, you can make it responsive by wrapping the two different pieces of information inside div tags like this:

HTML:

<div class="one">
  <table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
  <tr><td valign="top" style="padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 8px; border-top: 0; border-bottom: 0: border-left: 0; border-right: solid 1px #a9a9a9"><img id="preview-image-url" src="https://www.dropbox.com/s/wyw7cf00r7gasyy/tn-logo-email.png?raw=1"></td>
  <td style="padding-top: 0; padding-bottom: 0; padding-left: 12px; padding-right: 0;"></td>
  </tr>
  </table>
</div>

 //////------------------------------------------------------------------------------------------------/////

<div class="two">
  <table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
  <tr><td colspan="2" style="padding-bottom: 5px; color: #54c2ca; font-size: 18px; font-family: Arial, Helvetica, sans-serif;">Employee Name - BCA, CA</td></tr>
  <tr><td colspan="2" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><i>Chartered Accountant</i></td></tr>
  <tr><td colspan="2" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif; padding-top: 5px;"><strong>True North Chartered Accountants</strong></td></tr>
  <tr>
    <td width="20" valign="center"><img id="preview-image-url" src=" https://www.dropbox.com/s/79zirqm5437l6pj/true-north-phone.png?raw=1"></td>
    <td valign="top" style="vertical-align: top; color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">01 234 5678</td>
  </tr>
  <tr>
    <td width="20" valign="center"><img id="preview-image-url" src=" https://www.dropbox.com/s/i3hqbkukslgbcln/true-north-address.png?raw=1"></td>
    <td valign="top" style="vertical-align: top; color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">1234 Anywhere Street, Anywhere 1234 or PO Box 1234, Anywhere 1234</td>
  </tr>
  <tr>
    <td width="20" valign="center"><img id="preview-image-url" src=" https://www.dropbox.com/s/rxm46999l4nfjvk/true-north-web.png?raw=1"></td>
    <td valign="center" style="vertical-align: top; color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><a href="http://www.google.co.nz" style=" color: #f0a81a; text-decoration: none; font-weight: normal; font-size: 14px;">www.company.com</a>&nbsp;&nbsp;&nbsp;<img id="preview-image-url" src="https://www.dropbox.com/s/e6zkvg1ajezc959/true-north-email.png?raw=1">&nbsp;<a href="mailto:employee@company.com" style="color: #f0a81a; text-decoration: none; font-weight: normal; font-size: 14px;">employee@company.com</a></td></tr>
  </table>
  <table><tr><td style="font-size: 10px; font-family: Arial, Helvetica, sans-serif; font-style: italic; padding-top: 5px;">WARNING: The information in this email is confidential and may be privileged. If you are not the intended recipient, you must not read, use, copy or distribute this email or attachment, as such action may be unlawful. If you have received this email in error, please notify us immediately by return email, facsimile or telephone and delete the message. Where addressed to a client, any views expressed or advice given in this communication are subject to our engagement terms and conditions. Any views expressed in the message are those of the individual sender, except where the sender specifically states them to be otherwise.</td></tr>
  </table>
</div>

Then you can float the Employee information div (with the class '.two') to the right, and then add a media query and have a float property of none, like this:

CSS:

.two { float: right; }

@media (max-width: 600px) {
   .one { float: none; }
}

Apologies again, hope this helps you now!

Holly Logan
Holly Logan
7,142 Points
Holly Logan
Holly Logan
7,142 Points

Thanks James. This is an email signature though - I was under the impression that you had to use tables for email signatures?

Holly Logan
Holly Logan
7,142 Points
Holly Logan
Holly Logan
7,142 Points

Thank you again James. I understand what you mean by wrapping them in divs, and I now understand the purpose - thanks. However, still struggling on how to add the css inline, I suppose I haven't done that before as I've only learnt about external style sheets. Do I add the float property to the div tag i.e. <div class="one" style="float:none;">? Where does the media query go?

FYI - I have googled this but seem to be getting myself confused!

James Matthews
James Matthews
21,610 Points
James Matthews
James Matthews
21,610 Points

Hi Holly, yes you simply use the style attribute on the specified div. You can then try adding the query using the style markup and not the attribute. e.g:

<style>
@media (max-width: 600px) {
   .one { float: none; }
}
</style>
Holly Logan
Holly Logan
7,142 Points
Holly Logan
Holly Logan
7,142 Points

Hi James, me again!

Sorry but I just cant seem to get this to work. As soon as I add the divs in, it automatically stacks them on top of one another. I added "overflow: hidden" to div two, but then the media query doesn't work.

I also want the vertical bar between the divs to rotate to horizontal when on mobile. So like this:

Desktop logo | employee details

Mobile logo

employee details.

What am I doing wrong here?

Thanks in advance Holly

<style>
@media (max-width: 600px) {
   .one { float: none; }
}
</style>



<div class="one">
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr><td valign="top" style="padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 8px; border-top: 0; border-bottom: 0: border-left: 0; border-right: solid 1px #a9a9a9"><img id="preview-image-url" src="https://www.dropbox.com/s/wyw7cf00r7gasyy/tn-logo-email.png?raw=1"></td>
<td style="padding-top: 0; padding-bottom: 0; padding-left: 12px; padding-right: 0;">
</td></tr></table></div>


<div class="two" style="float: right;">
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr><td colspan="2" style="padding-bottom: 5px; color: #54c2ca; font-size: 18px; font-family: Arial, Helvetica, sans-serif;">Trudi Herniman - BHS (Hons), CA</td></tr>
<tr><td colspan="2" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><i>Accountant and Software Consultant</i></td></tr>
<tr><td colspan="2" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif; padding-top: 5px;"><strong>True North Chartered Accountants</strong></td></tr>
<tr>
  <td width="20" valign="center"><img id="preview-image-url" src=" https://www.dropbox.com/s/79zirqm5437l6pj/true-north-phone.png?raw=1"></td>
  <td valign="top" style="vertical-align: top; color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">07 343 1197&nbsp;&nbsp;&nbsp;<img id="preview-image-url" src=" https://www.dropbox.com/s/i9lcs3ci7c8ckuu/true-north-mobile.png?raw=1">&nbsp;&nbsp;027 384 4993</td>
  </tr>
<tr>
  <td width="20" valign="center"><img id="preview-image-url" src=" https://www.dropbox.com/s/i3hqbkukslgbcln/true-north-address.png?raw=1"></td>
  <td valign="top" style="vertical-align: top; color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">1076 Pukaki Street, Rotorua 3010 or PO Box 1171, Rotorua 3040</td>
  </tr>
<tr>
  <td width="20" valign="center"><img id="preview-image-url" src=" https://www.dropbox.com/s/rxm46999l4nfjvk/true-north-web.png?raw=1"></td>
  <td valign="center" style="vertical-align: top; color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><a href="http://www.tnca.co.nz" style=" color: #f0a81a; text-decoration: none; font-weight: normal; font-size: 14px;">www.tnca.co.nz</a>&nbsp;&nbsp;&nbsp;<img id="preview-image-url" src="https://www.dropbox.com/s/e6zkvg1ajezc959/true-north-email.png?raw=1">&nbsp;<a href="mailto:trudi@tnca.co.nz" style="color: #f0a81a; text-decoration: none; font-weight: normal; font-size: 14px;">trudi@tnca.co.nz</a></td></tr>
</table>
<table><tr><td style="font-size: 10px; font-family: Arial, Helvetica, sans-serif; font-style: italic; padding-top: 5px;">WARNING: The information in this email is confidential and may be privileged. If you are not the intended recipient, you must not read, use, copy or distribute this email or attachment, as such action may be unlawful. If you have received this email in error, please notify us immediately by return email, facsimile or telephone and delete the message. Where addressed to a client, any views expressed or advice given in this communication are subject to our engagement terms and conditions. Any views expressed in the message are those of the individual sender, except where the sender specifically states them to be otherwise.</td></tr></table>
</div>
James Matthews
James Matthews
21,610 Points
James Matthews
James Matthews
21,610 Points

I may finally have a solution for you Holly :D

Now that the two tables have been wrapped in div tags, instead of floating the Employee details to the right, you can float the first table (.one) to the left. As divs are block-level elements, they will automatically flow underneath each other when the screen width gets too small. So, I have changed the media queries and tested this locally myself, and as far as I can see it works. I've also made it so the right-border becomes a bottom-border at the specified screen width. Here you go:

<style type="text/css">
    @media (max-width: 600px) {
       .one td { 
            border-right: 0px;
            border-bottom: solid 1px #a9a9a9;
        }
    }

    @media (min-width: 601px) {
        .one {
            border-right: solid 1px #a9a9a9;    
    }
</style>



<div class="one" style="float: left;">
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr><td valign="top" style="padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 8px; border-top: 0; border-bottom: 0: border-left: 0;"><img id="preview-image-url" src="https://www.dropbox.com/s/wyw7cf00r7gasyy/tn-logo-email.png?raw=1"></td>
<td style="padding-top: 0; padding-bottom: 0; padding-left: 12px; padding-right: 0;">
</td></tr></table></div>


<div class="two";">
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr><td colspan="2" style="padding-bottom: 5px; color: #54c2ca; font-size: 18px; font-family: Arial, Helvetica, sans-serif;">Trudi Herniman - BHS (Hons), CA</td></tr>
<tr><td colspan="2" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><i>Accountant and Software Consultant</i></td></tr>
<tr><td colspan="2" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif; padding-top: 5px;"><strong>True North Chartered Accountants</strong></td></tr>
<tr>
  <td width="20" valign="center"><img id="preview-image-url" src=" https://www.dropbox.com/s/79zirqm5437l6pj/true-north-phone.png?raw=1"></td>
  <td valign="top" style="vertical-align: top; color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">07 343 1197&nbsp;&nbsp;&nbsp;<img id="preview-image-url" src=" https://www.dropbox.com/s/i9lcs3ci7c8ckuu/true-north-mobile.png?raw=1">&nbsp;&nbsp;027 384 4993</td>
  </tr>
<tr>
  <td width="20" valign="center"><img id="preview-image-url" src=" https://www.dropbox.com/s/i3hqbkukslgbcln/true-north-address.png?raw=1"></td>
  <td valign="top" style="vertical-align: top; color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">1076 Pukaki Street, Rotorua 3010 or PO Box 1171, Rotorua 3040</td>
  </tr>
<tr>
  <td width="20" valign="center"><img id="preview-image-url" src=" https://www.dropbox.com/s/rxm46999l4nfjvk/true-north-web.png?raw=1"></td>
  <td valign="center" style="vertical-align: top; color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><a href="http://www.tnca.co.nz" style=" color: #f0a81a; text-decoration: none; font-weight: normal; font-size: 14px;">www.tnca.co.nz</a>&nbsp;&nbsp;&nbsp;<img id="preview-image-url" src="https://www.dropbox.com/s/e6zkvg1ajezc959/true-north-email.png?raw=1">&nbsp;<a href="mailto:trudi@tnca.co.nz" style="color: #f0a81a; text-decoration: none; font-weight: normal; font-size: 14px;">trudi@tnca.co.nz</a></td></tr>
</table>
<table><tr><td style="font-size: 10px; font-family: Arial, Helvetica, sans-serif; font-style: italic; padding-top: 5px;">WARNING: The information in this email is confidential and may be privileged. If you are not the intended recipient, you must not read, use, copy or distribute this email or attachment, as such action may be unlawful. If you have received this email in error, please notify us immediately by return email, facsimile or telephone and delete the message. Where addressed to a client, any views expressed or advice given in this communication are subject to our engagement terms and conditions. Any views expressed in the message are those of the individual sender, except where the sender specifically states them to be otherwise.</td></tr></table>
</div>

:D!