Search code examples
htmlcssresponsive-designhtml-emailemail-templates

How to size 3 buttons responsively without media queries

I have 3 buttons in a row in an email. When this is viewed on a mobile screen, they are squashed per the picture below.

Squashed output on a narrow screen

Can someone please help with how I can size these to be read in a "normal" manner on a mobile screen without media queries (this is an email, so all my styling is in-line).

Any solution is fine - as long as the wording doesn't appear to be squashed.

<tbody style="padding-top:10px">
  <tr style="border-collapse:collapse">
    <td valign="top" align="center" style="border-collapse:collapse;padding:5px 0">

      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;border-spacing:33px 2px">
        <tbody>
          <tr style="border-collapse:collapse">
            <td bgcolor="#fae231" valign="top" align="center" style="border-collapse:collapse;padding:13px 17px;border-radius:8px;background-color:#fae231">
              <a href="https://fluf.io/profile/?testaccountgt/orders/view-order/7501" style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616" target="_blank"
                data-saferedirecturl="https://www.google.com/url?q=https://fluf.io/profile/?testaccountgt/orders/view-order/7501&amp;source=gmail&amp;ust=1646256195425000&amp;usg=AOvVaw3u-T-1Gq8L6jxeAo388tcD">View order</a>
            </td>
            <td bgcolor="#fae231" valign="top" align="center" style="border-collapse:collapse;padding:13px 17px;border-radius:8px;background-color:#fae231">
              <a style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616">Track order</a>
            </td>
            <td bgcolor="#fae231" valign="top" align="center" style="border-collapse:collapse;padding:13px 17px;border-radius:8px;background-color:#fae231">
              <a href="https://fluf.io/outlets//reviews/" style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://fluf.io/outlets//reviews/&amp;source=gmail&amp;ust=1646256195425000&amp;usg=AOvVaw2n8CPAJtw95Aum6KO_PqNR">Submit a Review</a>
            </td>

          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</tbody>

Code as Fiddle

Solution

  • There is no responsive way if you use a table as the tables will not break into elss columns if there is not enough width. The one thing you can do is to change display:block; to display:inline-block. Then use white-space: nowrap to prevent a linebreak within the button:

    <a href="https://fluf.io/profile/?testaccountgt/orders/view-order/7501" style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:inline-block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616;padding:13px 17px;border-radius:8px;background-color:#fae231;white-space:nowrap;" target="_blank"
  data-saferedirecturl="https://www.google.com/url?q=https://fluf.io/profile/?testaccountgt/orders/view-order/7501&amp;source=gmail&amp;ust=1646256195425000&amp;usg=AOvVaw3u-T-1Gq8L6jxeAo388tcD">View order</a>

<a style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:inline-block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616;padding:13px 17px;border-radius:8px;background-color:#fae231;white-space:nowrap;">Track order</a>

<a href="https://fluf.io/outlets//reviews/" style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:inline-block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616;padding:13px 17px;border-radius:8px;background-color:#fae231;white-space:nowrap;" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://fluf.io/outlets//reviews/&amp;source=gmail&amp;ust=1646256195425000&amp;usg=AOvVaw2n8CPAJtw95Aum6KO_PqNR">Submit a Review</a>