Foundation-emails: [Visibility Classes] spacer not respecting those

[GBratsos]

How can we reproduce this bug?
Use the code below or try to add two different sized spacers and add visibility classes.

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

<columns small="12" large="4" class="title">
            <callout class="pod">
                <div class="black">
                    <h2 class="text-center">Lorem Ipsum</h2>
                    <spacer size="10" class="show-for-small"></spacer><spacer size="30" class="show-for-large"></spacer>
                    <center>
                        <img src="http://placehold.it/67x66">
                    </center>
                    <spacer size="45" class="show-for-large"></spacer>
                </div>
            </callout>
        </columns>

What did you expect to happen?
When viewing email on mobile i should have the smaller spacer size and on large break-point the small break-point must be disabled and the large

What happened instead?
On large both breakpoints are there. If you use show-for-large and hide-for-large you end up without spacer on mobile.

What email clients does this happen in?
All even on web browser.

[rafibomb]

Is the class being passed into the compiled HTML?

There is a PR we added in for spacers based on screen size:
This might be something you can test to see if it solves for you https://github.com/zurb/inky/pull/36

[rafibomb]

@GBratsos Does the PR zurb/inky#36 mentioned here solve it for you? It tested well on all clients!

[GBratsos]

Yeap, problem is solved with the 2.2.0 version! :+1:

[illycz]

There is still problem, when I use inliner. But I think this is visibility problem.
When !important is used here: https://github.com/zurb/foundation-emails/blob/develop/scss/components/_visibility.scss#L10 it's impossible override this within mq...

[tdhartwick]

Looks like @GBratsos's initial problem was resolved! To address @illycz, we just pushed a fixed for visibility classes that should fix it! Closing this for now, feel free to reopen if there are still issues!

[lukepeach]

Hi @tdhartwick it still seems that the visibility classes are not working properly.

When I add a spacer , such as <spacer size-lg="40" size-sm="10"></spacer>, the large value is fine, but the small value is not showing up and there is no spacer.

Upon further investigation, it looks like the class="spacer hide-for-large" is being applied on the small-screen sized spacer, but it is still getting an inlined value of display: none!important; (which is overriding the hide-for-large styles

This is when I am running the inliner npm run build

[cossssmin]

@lukepeach I didn't even know about size-sm and size-lg for spacers, until you mentioned it. Thanks!

The fix for .hide-for-large should be pushed to master as a hotfix, if possible.
Especially since we're getting close to the day when Google will support responsive.

[ainstushar]

@tdhartwick, @lukepeach is right. display: none !important is preventing the spacer from appearing in small screens. Any way to fix that?

Thanks!

[sammularczyk]

I've got the exact same issue as above!

[Echelpoel]

Bumping into the same problem. Anyone found a fix?

[LucPestille]

Same issue here - spacers with size-lg/size-sm are fine, until you run the build or zip process, at which point the small size spacers disappear.

[lspoor]

Any idea why this is closed? Still experiencing this issue....

[sevab]

Issue is fixed on the develop branch, so had to switch, prob time for a minor release.

[pashkes]

I understand the problem is not solved ....? 👎
Why about this problem by not writing in the documentation?
I just made 12 templates and after build project saw this bug