Menu icon Foundation
Don't respect the number of columns

Hi everyone!

I don't what I'm doing wrong. I'm trying to build some simple e-mail using columns. The structure is:

| 1 (offset) | 5 columns                            | 5 columns                           |

The first column will be an offset. The both 5 columns will be text and the last one will be nothing. I will have 11 columns for this.

The code right now is:

<container>
    <row>
        <columns small="12" large="5" class="large-offset-1">
            <p>
                Air plant you probably haven't ornin heard of them single-origin coffee raw denim pinterest ethical bicycle rights. Heirloom activated charcoal VHS bicycle rights. Seitan migas a  everyday carry kickstarter try-hard flannel, asymmetrical iPhone aun at flexitarian man bun.
            </p>
            <expander></expander>
        </columns>
        <columns small="12" large="5">
            <p>
                Kinfolk jianbing hexagon 3 wolf shi moon blue bottle. Kitsch retro sustainable post-ironic, 3 wolf moon a taxidermy vinyl kale chips. 3 wolf moon vice VHS tote bag viral, den live-edge mustache. Literally them live-edge art party, selfies cray at  semiotics narwhal hammock.
            </p>
            <expander></expander>
        </columns>
    </row>
</container>

 

The result is:



The first block with text is ok and the offset is working, but the next block is taking all the 6 columns ahead.

I made another test putting 2 columns in the first block.




Then I got the second block bigger. 

So, What am i doing wrong?

PS: at Gmail, the media query is not working.

 

Thanks!

 

emailcolumnsoffsetFoundationframework

Hi everyone!

I don't what I'm doing wrong. I'm trying to build some simple e-mail using columns. The structure is:

| 1 (offset) | 5 columns                            | 5 columns                           |

The first column will be an offset. The both 5 columns will be text and the last one will be nothing. I will have 11 columns for this.

The code right now is:

<container>
    <row>
        <columns small="12" large="5" class="large-offset-1">
            <p>
                Air plant you probably haven't ornin heard of them single-origin coffee raw denim pinterest ethical bicycle rights. Heirloom activated charcoal VHS bicycle rights. Seitan migas a  everyday carry kickstarter try-hard flannel, asymmetrical iPhone aun at flexitarian man bun.
            </p>
            <expander></expander>
        </columns>
        <columns small="12" large="5">
            <p>
                Kinfolk jianbing hexagon 3 wolf shi moon blue bottle. Kitsch retro sustainable post-ironic, 3 wolf moon a taxidermy vinyl kale chips. 3 wolf moon vice VHS tote bag viral, den live-edge mustache. Literally them live-edge art party, selfies cray at  semiotics narwhal hammock.
            </p>
            <expander></expander>
        </columns>
    </row>
</container>

 

The result is:



The first block with text is ok and the offset is working, but the next block is taking all the 6 columns ahead.

I made another test putting 2 columns in the first block.




Then I got the second block bigger. 

So, What am i doing wrong?

PS: at Gmail, the media query is not working.

 

Thanks!

 

This post has been closed. No new replies can be added.

Ryan McCready almost 3 years ago

Hi Italo,

With tables you're better off adding an empty column at the end, otherwise table cells will take up any of the remaining space. So add something like this:

<columns></columns>

Let us know how it goes!

Italo almost 3 years ago

Hi Ryan! Thanks for your reply.

So, I tested with the empty columns at the end but didn't work.

 

 

I'm using large-offset-1 and large 5 in the first column and using large-5 in the last column.

Do you have another idea to try?

Italo almost 3 years ago

I made a test and I setted the last empty column with large-1 and it works.

Thanks, Ryan! =)

Ryan McCready almost 3 years ago

Great! Glad it worked out :)