search

foundation / foundation-emails

Quickly create responsive HTML emails that work on any device and client. Even Outlook.
https://get.foundation/emails/docs/
MIT License
7.77k stars 1.09k forks source link

Responsive/mobile layout misbehaving - grid layout #1140

Closed CosminAvasiloaei closed 1 year ago

CosminAvasiloaei commented 1 year ago

How can we reproduce this bug?

Write out the HTML (or Inky code) that causes the issue.

`

2023 Home Adult Shirt

Size: Large

Color: White/Blue

 
            <columns small="2" large="1">
                <p class="text-center light-gray">x1</p>
            </columns>
            <columns small="3" large="2">
                <p class="text-right ">&pound;20.00</p>
            </columns>
        </row>`

image

What did you expect to happen? The specified number to reflect into the width of the content on mobile.

What happened instead? Foundation seems to be overwriting their own width % with higher % as if it would have a higher number of columns specified for "small"; e.g. small-3 is given width of small-4

CosminAvasiloaei commented 1 year ago

Seemingly this is all done in a node_modules file of Foundation Emails so not something I can amend, nor do I want to start writing hundreds of lines to overwrite this sort of behaviour which occurs on multiple column widths

viking1304 commented 1 year ago

Your screenshot shows that small-3 = 25%, which is the correct value.

The default grid has 12 rows, in which case the widths should be:

small-1 = 8.333333%
small-2 = 16.666666%
small-3 = 25%
small-4 = 33.333333%
...
small-6 = 50%
...
small-12 = 100%

If you consider this piece of code

<columns small="3"></columns>
<columns small="3"></columns>
<columns small="3"></columns>
<columns small="3"></columns>

it became very obvious that small-3 must be 25%

The same applies to this

<columns small="4"></columns>
<columns small="4"></columns>
<columns small="4"></columns>

small-4 should obviously has to be 33.333333%

In your case, with

<columns small="7"></columns>
<columns small="2"></columns>
<columns small="3"></columns>

you must get those values:

small-7 = 58.333333% small-2 = 16.666666% small-3 = 25%

CosminAvasiloaei commented 1 year ago

Yeah, I finally realized I was being silly and rushed to not trust into Foundation :D, although it seems to be acting silly in a different way.

Turns out what is actually happening is if you have line-break between your elements then it adds some whitespace to the page and messes up the layout. I have made sure I didnt have any whitespace in the code apart from the actual line-break, but it seems to only like it if the next element follows immediately after the previous closing tag.

image image