Menu icon Foundation

My Posts

No Content

My Comments

Matt Smith commented on Nick Beswick's post almost 3 years

Hi Nick,
 
I wasn't 100% sure as html in emails can be very limited...however as its all just tables, it turns out you can. You would just add the 'valign' to the appropriate <columns>.
You can take look here https://foundation.zurb.com/emails/docs/alignment.html#vertical-alignment where its described how to do this either via html or inky.
 
If you are having trouble getting it to work though, I would take a guess at saying the issue would be the height of the column your sidebar elements are nested in as it might not be equal to the height of the main body column.
Matt

Matt Smith commented on Nick Beswick's post almost 3 years

What you need to do is nest you columns inside the sidebar column. The following should do the trick:
<row>
<columns small="12" large="4">
<row>
<columns class="side-contact-us" large="12">
<h4>Contact Us</h4>
<p>To talk to us about your requirements or to arrange a viewing, contact:</p>
<p>John Doe</p>
<p>Brown Estates</p>
<p><a href="">xxx-xxx-xxxx</a></p>
<p><a href="">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi a ullam atque mollitia consequuntur incidunt accusantium! Dolore harum praesentium, porro, perferendis saepe magnam, assumenda quam reiciendis nisi suscipit totam necessitatibus.</p>
<p><a href="">www.jd.co.uk&lt;/a&gt;&lt;/p>
</columns>
</row>
<row>
<columns class="side-contact-us" large="12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores labore maxime non nam et rem tempore.</p>
<p>voluptatem culpa odit vitae atque quisquam ex ratione. Molestiae nesciunt mollitia recusandae dolores vitae.</p>
<p>voluptatem culpa odit vitae atque quisquam ex ratione. Molestiae nesciunt mollitia recusandae dolores vitae.</p>
</columns>
</row>
</columns>
<columns small="12" large="8">
<h4>Main Message</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque maiores veniam enim consequuntur quis nostrum, quasi iure? Praesentium exercitationem neque totam minus provident eum ad aut quae maiores qui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque maiores veniam enim consequuntur quis nostrum, quasi iure? Praesentium exercitationem neque totam minus provident eum ad aut quae maiores qui.</p>
</columns>
</row>
Hope that helps :)
 
Matt

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Nick Beswick's post almost 3 years

Hi Nick,
 
I wasn't 100% sure as html in emails can be very limited...however as its all just tables, it turns out you can. You would just add the 'valign' to the appropriate <columns>.
You can take look here https://foundation.zurb.com/emails/docs/alignment.html#vertical-alignment where its described how to do this either via html or inky.
 
If you are having trouble getting it to work though, I would take a guess at saying the issue would be the height of the column your sidebar elements are nested in as it might not be equal to the height of the main body column.
Matt

You commented on Nick Beswick's post almost 3 years

What you need to do is nest you columns inside the sidebar column. The following should do the trick:
<row>
<columns small="12" large="4">
<row>
<columns class="side-contact-us" large="12">
<h4>Contact Us</h4>
<p>To talk to us about your requirements or to arrange a viewing, contact:</p>
<p>John Doe</p>
<p>Brown Estates</p>
<p><a href="">xxx-xxx-xxxx</a></p>
<p><a href="">[email protected]</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi a ullam atque mollitia consequuntur incidunt accusantium! Dolore harum praesentium, porro, perferendis saepe magnam, assumenda quam reiciendis nisi suscipit totam necessitatibus.</p>
<p><a href="">www.jd.co.uk&lt;/a&gt;&lt;/p>
</columns>
</row>
<row>
<columns class="side-contact-us" large="12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores labore maxime non nam et rem tempore.</p>
<p>voluptatem culpa odit vitae atque quisquam ex ratione. Molestiae nesciunt mollitia recusandae dolores vitae.</p>
<p>voluptatem culpa odit vitae atque quisquam ex ratione. Molestiae nesciunt mollitia recusandae dolores vitae.</p>
</columns>
</row>
</columns>
<columns small="12" large="8">
<h4>Main Message</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque maiores veniam enim consequuntur quis nostrum, quasi iure? Praesentium exercitationem neque totam minus provident eum ad aut quae maiores qui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque maiores veniam enim consequuntur quis nostrum, quasi iure? Praesentium exercitationem neque totam minus provident eum ad aut quae maiores qui.</p>
</columns>
</row>
Hope that helps :)
 
Matt

Posts Followed

Following

  • No Content

Followers

  • No Content