Foundation-emails: .hide-for-large is not working after inline

[yetaoau]

just notice with the new updates

.hide-for-large is not working after inline (not showing on mobile version)
css display: none!important; on element itself overwrite the other media query css display: table!important;

---

Also in _grid.scss .

column,
.columns {
padding-left: 0!important;
padding-right: 0!important;

stop me to define customer padding for sub-columns.

[rafibomb]

The .columns .columns selector is to remove the extra padding created when nesting columns.

Have you tried adjusting the padding using the same CSS?

.column .columns {
padding-left: 30px !important;
padding-right: 30px !important;

[rafibomb]

On the .hide-for-large - is it not working at all or just in one email client? Can you share a code example to test against?

This is the test case we've been using https://github.com/zurb/foundation-emails/blob/develop/test/visual/pages/visibility.html

Visibility was tested before the 2.2.1 release - it's known that Gmail does not support media queries so .hide-for-large doesn't work there.

[yetaoau]

Hi rafibomb,
I even tried your test case, it is not working either after inline.
As soon as you run npm run build, the .hide-for-large is not there.
As i see here, after inline, display: none!important; is added on element itself overwrite the other media query css

[sergeylukin]

I can confirm that. Inlined !important rule beats any other rule so Gmail and Outlook 2016 issues aside, it's obvious that since f24fe7304f0b615cf828f0e90b7787a1f7aafc7d .hide-for-large is hiding element on both small and large screens as display: table !important inside media query is overtaken by inlined display: none !important. I've proposed a solution including Gmail and Outlook 2016 support in https://github.com/zurb/foundation-emails/pull/509

[LLBuitrago]

Hide for large not working at all i'm finding - any fix for this yet?

[GrantCE]

I'm experiencing the same issue - the inliner adds "display: none !important" directly to the element so it's never overridden. Removing the !important doesn't seem to fix it either - I see both in Gmail.

[sergeylukin]

You need to wrap the element with a div in addition to removing !important. Please see my PR #509 for more details

[tobyimaginepublishing]

I removed !important from display: none in _visibility.scss so that .hide-for-large works after inlining

[elepedus]

Does anyone know when the fix will make it into the master release? We're using the SASS version and having to make the change inside the node module for every new project is not ideal.

[tdhartwick]

https://github.com/zurb/foundation-emails/commit/cf7d15a3ce7c9bb400094763a5f42282f57157d6 Fixed!

Closing this one down! Please reopen, if you guys are still seeing issues!

Thanks for the awesome feedback, you guys rock!

[bakezhan]

I am using foundation-emails 2.2.1, and i am facing the same issue, after inline "display: none !important" added to the element