Menu icon Foundation
Resizing Columns in Email Foundation

Hi, I'm having trouble with resizing on email, basically I want these strips here:

 

 

to resize properly as the email hits breakpoint, though they are turning out like this:

 

 

Here's what my code look's like, any advice would be great! thank you:

<row>

    <columns small="0.5" large="0.5" valign="middle"></columns>

    <columns class="benefit__1" small="2" large="4" valign="middle">
        <img src="assets/img/logo.png" alt="logo" width="80" height="80"/>
    </columns>

     <columns class="benefit__2 text-center" small="10" large="12" valign="middle">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut augue turpis. Curabitur 
    </columns>

    <columns small="0" large="0.5"></columns>

</row>


<spacer size="15"></spacer>


<row>

    <columns small="0.5" large="0.5"></columns>

    <columns class="benefit__1" small="4" large="4">
        <img src="assets/img/logo.png" alt="logo" width="80" height="80"/>
    </columns>

     <columns class="benefit__2" small="12" large="12" valign="middle">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut augue turpis. Curabitur diam mauris, auctor a libero eu, eleifend porta elit. Phasellus facilisis metus vel tellus sodales feugiat
    </columns>

    <columns small="0.5" large="0.5"></columns>

</row>

emailresizingResponsivehtml

Hi, I'm having trouble with resizing on email, basically I want these strips here:

 

 

to resize properly as the email hits breakpoint, though they are turning out like this:

 

 

Here's what my code look's like, any advice would be great! thank you:

<row>

    <columns small="0.5" large="0.5" valign="middle"></columns>

    <columns class="benefit__1" small="2" large="4" valign="middle">
        <img src="assets/img/logo.png" alt="logo" width="80" height="80"/>
    </columns>

     <columns class="benefit__2 text-center" small="10" large="12" valign="middle">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut augue turpis. Curabitur 
    </columns>

    <columns small="0" large="0.5"></columns>

</row>


<spacer size="15"></spacer>


<row>

    <columns small="0.5" large="0.5"></columns>

    <columns class="benefit__1" small="4" large="4">
        <img src="assets/img/logo.png" alt="logo" width="80" height="80"/>
    </columns>

     <columns class="benefit__2" small="12" large="12" valign="middle">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut augue turpis. Curabitur diam mauris, auctor a libero eu, eleifend porta elit. Phasellus facilisis metus vel tellus sodales feugiat
    </columns>

    <columns small="0.5" large="0.5"></columns>

</row>
Corey Schaaf about 3 years ago

I think you have a few issues here. I don't believe you can use small="0.5".  You have to use whole numbers like small="1". You also can't use small="0".  

When putting columns in a row they normally have to add up to 8 (offsets are an exception to the rule - you can read about them in the docs http://foundation.zurb.com/emails/docs/grid.html

This is the propper inky syntax you should use. 

<row>
    <columns small="4" valign="middle" class="benefit__1">
        <img src="assets/img/logo.png" alt="logo" width="80" height="80"/>
    </columns>

    <columns small="8" valign="middle" class="benefit__2 text-center">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut augue turpis. Curabitur 
    </columns>
</row>

<row>
    <columns small="4" valign="middle" class="benefit__1">
        <img src="assets/img/logo.png" alt="logo" width="80" height="80"/>
    </columns>

    <columns small="8" valign="middle" class="benefit__2 text-center">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut augue turpis. Curabitur 
    </columns>
</row>