Menu icon Foundation
Left Align Email Signature Full width

Good evening, dear Foundation Community,

 

I try to create a simple FULL-WIDTH HTML signature with Foundation.

 

I want the signature actually left aligned under the "normal" e-mail, however, it is centered with the container.

 

If I remove the container, then the column pull very long at the telephone number.

 

Can I give a tip someone here?

 

Thank you very much 

 

Best

 

---
subject: My Email Subject
---
<container>
  <wrapper>
    <row>
      <columns small="12">
        <p>Adress</p>
      </columns>
    </row>
    <row>
      <columns small="1">Tel</columns>
      <columns small="11">555 12345</columns>
    </row>
    <row>
      <columns small="1">Fax</columns>
      <columns small="11">555 12345</columns>
    </row>
    <row>
      <columns small="1">Mail</columns>
      <columns small="11"><a href="mailto:emailadress">emailadress</a></columns>
    </row>
    <row>
      <columns small="1">Web</columns>
      <columns small="11"><a href="http://url" target="_blank">url</a></columns>
    </row>

    <row>
      <columns small="12">
        <hr />
        <p>Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences
        Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences </p>
      </columns>
    </row>

  </wrapper>
</container>

full widthleft alignnot center

Good evening, dear Foundation Community,

 

I try to create a simple FULL-WIDTH HTML signature with Foundation.

 

I want the signature actually left aligned under the "normal" e-mail, however, it is centered with the container.

 

If I remove the container, then the column pull very long at the telephone number.

 

Can I give a tip someone here?

 

Thank you very much 

 

Best

 

---
subject: My Email Subject
---
<container>
  <wrapper>
    <row>
      <columns small="12">
        <p>Adress</p>
      </columns>
    </row>
    <row>
      <columns small="1">Tel</columns>
      <columns small="11">555 12345</columns>
    </row>
    <row>
      <columns small="1">Fax</columns>
      <columns small="11">555 12345</columns>
    </row>
    <row>
      <columns small="1">Mail</columns>
      <columns small="11"><a href="mailto:emailadress">emailadress</a></columns>
    </row>
    <row>
      <columns small="1">Web</columns>
      <columns small="11"><a href="http://url" target="_blank">url</a></columns>
    </row>

    <row>
      <columns small="12">
        <hr />
        <p>Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences
        Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences Two long sentences </p>
      </columns>
    </row>

  </wrapper>
</container>
La Sagne about 3 years ago

Now i set manual the container to style="width: 100%".

Is there a better solution available ?

Thank you!

Carl Lister over 2 years ago

I know the thread is nearly a year old but it was a top hit when I googled for a solution.

So here's what I did.

Within componentFactory.js I changed all references of "center" to "left" and rebuilt foundation ('foundation build' in terminal)

And also included

.container
{
  margin:0!important;
}

in _template.scss

 

So far everything is testing fine. I had other solutions but they were stopping the email from adjusting / responsively on mobile devices. This seems to not affect this.