Menu icon Foundation
Contact Data Table (Phone/Mail/Web)

Hello Foundation Community,

i try to set just a HTML-Signature with a Table of Contact data.

That i can append this after my mail text on my emails.

 

e.g.

Phone (space)  555-12345

Mail (same space) [email protected]

Web (same space) www.website.de

...

 

This is what i got at the moment.

But the first column is not fix and the second getting bigger on resize the browser (for testing).

Do you have any ideas ?

 

Thank you very much !

 

---
subject: My Email Subject
---
<container style="width: 100%">
  <row>
    <columns small="1">
       <p class="text-left">phone</p>
    </columns>
    <columns small="11">
       <p class="text-left">555-123</p>
    </columns>
  </row>
  <row>
    <columns small="1">
       <p class="text-left">mail</p>
    </columns>
    <columns small="11">
       <p class="text-left">john(at)doe.de</p>
    </columns>
  </row>
  <row>
    <columns small="1">
       <p class="text-left">web</p>
    </columns>
    <columns small="11">
       <p class="text-left">www.website.de</p>
    </columns>
  </row>
</container>

 

Thank you very much !

 

contactfootertablesignature

Hello Foundation Community,

i try to set just a HTML-Signature with a Table of Contact data.

That i can append this after my mail text on my emails.

 

e.g.

Phone (space)  555-12345

Mail (same space) [email protected]

Web (same space) www.website.de

...

 

This is what i got at the moment.

But the first column is not fix and the second getting bigger on resize the browser (for testing).

Do you have any ideas ?

 

Thank you very much !

 

---
subject: My Email Subject
---
<container style="width: 100%">
  <row>
    <columns small="1">
       <p class="text-left">phone</p>
    </columns>
    <columns small="11">
       <p class="text-left">555-123</p>
    </columns>
  </row>
  <row>
    <columns small="1">
       <p class="text-left">mail</p>
    </columns>
    <columns small="11">
       <p class="text-left">john(at)doe.de</p>
    </columns>
  </row>
  <row>
    <columns small="1">
       <p class="text-left">web</p>
    </columns>
    <columns small="11">
       <p class="text-left">www.website.de</p>
    </columns>
  </row>
</container>

 

Thank you very much !

 

Rafi Benkual almost 3 years ago

Since the the small breakpoint cannot use fixed widths (everything scales), it used % width.

I've found that bumping up the columns size for the first column

  <row>
    <columns small="3" large="1">
       <p class="">phone</p>
    </columns>
    <columns small="9" large="11">
       <p class="">555-123</p>
    </columns>
  </row>

works best: