Question 42521 in Html Question posted in
Some basic documentation can be found here.

How to make this email signature responsive? – Html

I’ve created this email signature that looks good on desktop, however I struggle to make it responsive so that it also looks great on mobile. What I am trying to do is to have the logo display above the Name and Surname when viewed on mobile device. So rather than having two columns with data like on desktop, I would like it to be changed to one column with logo on top.

Heres the HTML and CSS codes

table {
  font-family: helvetica;
  font-size: 11px;
  width: 600px;
}

hr {
  width: 600px;
  margin-left: 0px;
  border: 0.5px solid #081A45;
}

#name {
  color: #081A45;
  font-size: 24px;
}

#contact-start {
  padding-top: 10px;
}

#contact-end {
  padding-bottom: 10px;
}

.image {
  width: 100%;
  height: 100%;
}

.image-container {
  width: 150px;
  height: 150px;
  padding: 10px;
}
<table>
  <tr>
    <td rowspan="6" class="image-container"><img class="image" src=""></td>
    <td id="name">Name Surname</td>
  </tr>
  <tr>
    <td>nr. licencji xxx </td>
  </tr>
  <tr>
    <td id="contact-start"><a href="mailto:">123123123</a></td>
  </tr>
  <tr>
    <td><a href="mailto:[email protected]">[email protected]</a></td>
  </tr>
  <tr>
    <td id="contact-end"><a href="www.google.com">www.warso.eu</a></td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at facilisis nibh. Mauris tempor nibh purus. Phasellus congue ullamcorper risus at tempus.</td>
  </tr>
</table>
<hr>
<table>
  <tr>
    <td> Our Partners:</td>
  </tr>
  <tr>
    <td> Logo1 Logo2 Logo3</td>
  </tr>
</table>

I have no clue what to do tbh, as I am just starting to learn HTML and CSS. I tried researching online for solution but I couldn’t make anything work.

Tags:

2

Answers


  1. 0

    Will need to create inline styles for exemple:

    <table style="display: flex; flex-direction: column; gap: 10px; width: 100%;">
    Login or Signup to reply.
  2. 0

    You can use CSS media queries to do mobile responsive behaviour. I have removed the image and added it outside the table and wrapped it inside a wrapper div and controlling its behaviour based on a flex wrapper. flex:1 inside the table element style means to take the available remaining space.

    You can add more style or change more to it by adding the different selectors inside the media tag.

    Also, Just a quick note using table for everything might possibly cause some rigiditity while styling element.

    Below is the code snippet:

    table {
  flex: 1;
  font-family: helvetica;
  font-size: 11px;
  width: 600px;
}

hr {
  width: 600px;
  margin-left: 0px;
  border: 0.5px solid #081A45;
}

#name {
  color: #081A45;
  font-size: 24px;
}

#contact-start {
  padding-top: 10px;
}

#contact-end {
  padding-bottom: 10px;
}

.image {
  width: 100%;
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: row;
}

.image-container {
  width: 150px;
  height: 150px;
  padding: 10px;
}

@media (max-width: 600px) {
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  table {
    font-family: helvetica;
    font-size: 11px;
    width: 600px;
  }
}
    <div class="wrapper">
  <div class="image-container"><img class="image" src=""></div>
  <table>
    <tr>
      <td id="name">Name Surname</td>
    </tr>
    <tr>

      <td>nr. licencji xxx </td>
    </tr>
    <tr>
      <td id="contact-start"><a href="mailto:">123123123</a></td>
    </tr>
    <tr>
      <td><a href="mailto:[email protected]">[email protected]</a></td>
    </tr>
    <tr>
      <td id="contact-end"><a href="www.google.com">www.warso.eu</a></td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at facilisis nibh. Mauris tempor nibh purus. Phasellus congue ullamcorper risus at tempus.</td>
    </tr>
  </table>
</div>
<hr>
<table>
  <tr>
    <td> Our Partners:</td>
  </tr>
  <tr>
    <td> Logo1 Logo2 Logo3</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search