Menu icon Foundation

Developer

My Posts


My Comments

Justin Triplett commented on Justin Triplett's post over 3 years

Hey Corey, thanks for the info but I have not had any luck with the solution you suggested. It makes sense to me, make a block tag display: none but then give it a class to so a media query can make is display: block.
I have tried this but I am still able to see the block that I have given display: none, which I'm finding very surprising. 
Even when I am just wrapping my content in a <div style="display:none;"> and doing nothing else gmail is still displaying anything within that div. This is blowing my mind, very frustrating.
Will gmail only use display: none on a td? I'm using inky and that doesn't seem to generate any td's that would be good to use. Any suggestion on a tag I can put that on in inky and have it display none in gmail. I can edit the output to wrap everything in another table but that is a little scary and I know the client would prefer to not have two whole different versions of the email in the same file they would have to edit to change pictures/text etc.
Really all I am looking to do at this point is hide a block in gmail, you would think this wouldn't be so hard! :)
edit 1:
Well I did finally realize that "display: none !important" will work in gmail but then the media query can't override that. So I think I have to look at alternative ways of hiding content from gmail, which I believe to be completely insane.
edit 2:
I found a work around where you can change the height and width and set overflow: hidden, however gmail doesn't support the height tag so then you end up with a big black block where your content would be. I'm working on specifying the smallest piece of content to minimize this space. "Interestingly" enough just trying to hide my div that has a background image is not working well because the content below it will not respect its size when surrounded by a hide-for-large. WOW that is some crazy side effect stuff there. 

Justin Triplett commented on Justin Triplett's post over 3 years

 Ah yes, I can't believe I missed that note at the bottom of the page. That makes perfect sense.
Thanks for being so helpful!
On a related note, the only real reason I'm using this hide-for-large here is because for the desktop version I am using a full size image and for the mobile size I am using div.cropped with a background image centered and height and width set -because the designers thought it would be best to use the same image. Do you have any tips on how to do something similar that won't rely on media queries?
Re: Em units, thanks for the article, I'm usually in the habit of working on sites and I like em but yeah a friend recently recommended me to stick to px for email... while I was in the middle of this project. I suppose I'll probably find some time to clean that up. 

Justin Triplett commented on Justin Triplett's post over 3 years

Hi Corey, thanks for reading my post, that's interesting that Foundation for emails is Desktop First.Of course it makes sense to see all the inlined css. I'll paste that in here, hopefully it is still readable!
This is only for the two rows in question, i left out the small header area that I included in the example above. I've also made some other slight (likely unrelated) changes in the meantime but am otherwise still seeing both rows.
Specifically the css class you pointed out is just this:
 
.large-intro {
margin-top:.6em;
}
<table class="row show-for-large large-intro" style="border-collapse: collapse; border-spacing: 0; display: table; margin-top: .6em; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th class="small-12 large-12 columns first last" style="Margin: 0 auto; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 619px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
<img src="http://werkbench.com/trip/assets/img/main_example.png" alt="" align="center" class="text-center" style="-ms-interpolation-mode: bicubic; Margin: 0 auto; border: none; clear: both; display: block; float: none; margin: 0 auto; max-width: 100%; outline: none; text-align: center; text-decoration: none; width: auto;">
<p class="topic" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #fdca56; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; hyphens: none; line-height: 19px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; padding: 0; padding-bottom: .6em; padding-top: 2.4em; text-align: left;">INSIGHTS</p>
<p class="article-title-main" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 600; hyphens: none; line-height: 42px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; padding: 0; padding-bottom: .6em; text-align: left;">Marketing munchies</p>
<p class="article-body" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: none; line-height: 20px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; padding: 0; padding-bottom: 15px; text-align: left;"><strong style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; margin: 0 auto; max-width: 600px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong> Suscipit totam quasi
ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>

            &lt;div class="article-button-left" style="float: left;"&gt;
              &lt;a href="#" style="Margin: 0; color: black; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"&gt;
                &lt;div class="text-button" style="float: left; font-size: 0.8em; padding-right: 0.6em;"&gt;KEEP READING&lt;/div&gt;
                &lt;div class="entity-arrow-right" style="float: left; margin-top: -2px;"&gt;&lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;

          &lt;/th&gt;
          &lt;th class="expander" style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/th&gt;
&lt;/tr&gt;

</tbody>
</table>
<table class="row hide-for-large" style="border-collapse: collapse; border-spacing: 0; display: none; font-size: 0; line-height: 0; max-height: 0px; mso-hide: all; overflow: hidden; padding: 0; position: relative; text-align: left; vertical-align: top; width: 0px;">
<tbody style="mso-hide: all;">
<tr style="mso-hide: all; padding: 0; text-align: left; vertical-align: top;">
<th class="small-12 large-12 columns first last" style="Margin: 0 auto; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0 auto; mso-hide: all; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 619px;">
<table style="border-collapse: collapse; border-spacing: 0; mso-hide: all; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="mso-hide: all; padding: 0; text-align: left; vertical-align: top;">
<th style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; mso-hide: all; padding: 0; text-align: left;">
<div style="mso-hide: all;">
<div class="cropped" style="background-image: url(main_example.png); background-position: center; background-repeat: no-repeat; height: 150px; mso-hide: all; overflow: hidden; width: 375px;"></div>
<p class="topic" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #fdca56; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; hyphens: none; line-height: 19px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; mso-hide: all; padding: 0; padding-bottom: .6em; padding-top: 2.4em; text-align: left;">INSIGHTS</p>
<p class="article-title-main" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 600; hyphens: none; line-height: 42px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; mso-hide: all; padding: 0; padding-bottom: .6em; text-align: left;">Marketing to mommy</p>
<p class="article-body" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: none; line-height: 20px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; mso-hide: all; padding: 0; padding-bottom: 15px; text-align: left;"><strong style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; margin: 0 auto; max-width: 600px; mso-hide: all;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong> Suscipit
totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>

              &lt;div class="article-button-left" style="float: left; mso-hide: all;"&gt;
                &lt;a href="#" style="Margin: 0; color: black; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; mso-hide: all; padding: 0; text-align: left; text-decoration: none;"&gt;
                  &lt;div class="text-button" style="float: left; font-size: 0.8em; mso-hide: all; padding-right: 0.6em;"&gt;KEEP READING&lt;/div&gt;
                  &lt;div class="entity-arrow-right" style="float: left; margin-top: -2px; mso-hide: all;"&gt;&lt;/div&gt;
                &lt;/a&gt;
              &lt;/div&gt;

            &lt;/div&gt;
          &lt;/th&gt;
          &lt;th class="expander" style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; mso-hide: all; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/th&gt;
&lt;/tr&gt;

</tbody>
</table>

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Justin Triplett's post over 3 years

Hey Corey, thanks for the info but I have not had any luck with the solution you suggested. It makes sense to me, make a block tag display: none but then give it a class to so a media query can make is display: block.
I have tried this but I am still able to see the block that I have given display: none, which I'm finding very surprising. 
Even when I am just wrapping my content in a <div style="display:none;"> and doing nothing else gmail is still displaying anything within that div. This is blowing my mind, very frustrating.
Will gmail only use display: none on a td? I'm using inky and that doesn't seem to generate any td's that would be good to use. Any suggestion on a tag I can put that on in inky and have it display none in gmail. I can edit the output to wrap everything in another table but that is a little scary and I know the client would prefer to not have two whole different versions of the email in the same file they would have to edit to change pictures/text etc.
Really all I am looking to do at this point is hide a block in gmail, you would think this wouldn't be so hard! :)
edit 1:
Well I did finally realize that "display: none !important" will work in gmail but then the media query can't override that. So I think I have to look at alternative ways of hiding content from gmail, which I believe to be completely insane.
edit 2:
I found a work around where you can change the height and width and set overflow: hidden, however gmail doesn't support the height tag so then you end up with a big black block where your content would be. I'm working on specifying the smallest piece of content to minimize this space. "Interestingly" enough just trying to hide my div that has a background image is not working well because the content below it will not respect its size when surrounded by a hide-for-large. WOW that is some crazy side effect stuff there. 

You commented on Justin Triplett's post over 3 years

 Ah yes, I can't believe I missed that note at the bottom of the page. That makes perfect sense.
Thanks for being so helpful!
On a related note, the only real reason I'm using this hide-for-large here is because for the desktop version I am using a full size image and for the mobile size I am using div.cropped with a background image centered and height and width set -because the designers thought it would be best to use the same image. Do you have any tips on how to do something similar that won't rely on media queries?
Re: Em units, thanks for the article, I'm usually in the habit of working on sites and I like em but yeah a friend recently recommended me to stick to px for email... while I was in the middle of this project. I suppose I'll probably find some time to clean that up. 

You commented on Justin Triplett's post over 3 years

Hi Corey, thanks for reading my post, that's interesting that Foundation for emails is Desktop First.Of course it makes sense to see all the inlined css. I'll paste that in here, hopefully it is still readable!
This is only for the two rows in question, i left out the small header area that I included in the example above. I've also made some other slight (likely unrelated) changes in the meantime but am otherwise still seeing both rows.
Specifically the css class you pointed out is just this:
 
.large-intro {
margin-top:.6em;
}
<table class="row show-for-large large-intro" style="border-collapse: collapse; border-spacing: 0; display: table; margin-top: .6em; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th class="small-12 large-12 columns first last" style="Margin: 0 auto; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 619px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
<img src="http://werkbench.com/trip/assets/img/main_example.png" alt="" align="center" class="text-center" style="-ms-interpolation-mode: bicubic; Margin: 0 auto; border: none; clear: both; display: block; float: none; margin: 0 auto; max-width: 100%; outline: none; text-align: center; text-decoration: none; width: auto;">
<p class="topic" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #fdca56; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; hyphens: none; line-height: 19px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; padding: 0; padding-bottom: .6em; padding-top: 2.4em; text-align: left;">INSIGHTS</p>
<p class="article-title-main" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 600; hyphens: none; line-height: 42px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; padding: 0; padding-bottom: .6em; text-align: left;">Marketing munchies</p>
<p class="article-body" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: none; line-height: 20px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; padding: 0; padding-bottom: 15px; text-align: left;"><strong style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; margin: 0 auto; max-width: 600px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong> Suscipit totam quasi
ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>

            &lt;div class="article-button-left" style="float: left;"&gt;
              &lt;a href="#" style="Margin: 0; color: black; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"&gt;
                &lt;div class="text-button" style="float: left; font-size: 0.8em; padding-right: 0.6em;"&gt;KEEP READING&lt;/div&gt;
                &lt;div class="entity-arrow-right" style="float: left; margin-top: -2px;"&gt;&lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;

          &lt;/th&gt;
          &lt;th class="expander" style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/th&gt;
&lt;/tr&gt;

</tbody>
</table>
<table class="row hide-for-large" style="border-collapse: collapse; border-spacing: 0; display: none; font-size: 0; line-height: 0; max-height: 0px; mso-hide: all; overflow: hidden; padding: 0; position: relative; text-align: left; vertical-align: top; width: 0px;">
<tbody style="mso-hide: all;">
<tr style="mso-hide: all; padding: 0; text-align: left; vertical-align: top;">
<th class="small-12 large-12 columns first last" style="Margin: 0 auto; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0 auto; mso-hide: all; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 619px;">
<table style="border-collapse: collapse; border-spacing: 0; mso-hide: all; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="mso-hide: all; padding: 0; text-align: left; vertical-align: top;">
<th style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; mso-hide: all; padding: 0; text-align: left;">
<div style="mso-hide: all;">
<div class="cropped" style="background-image: url(main_example.png); background-position: center; background-repeat: no-repeat; height: 150px; mso-hide: all; overflow: hidden; width: 375px;"></div>
<p class="topic" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #fdca56; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; hyphens: none; line-height: 19px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; mso-hide: all; padding: 0; padding-bottom: .6em; padding-top: 2.4em; text-align: left;">INSIGHTS</p>
<p class="article-title-main" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 40px; font-weight: 600; hyphens: none; line-height: 42px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; mso-hide: all; padding: 0; padding-bottom: .6em; text-align: left;">Marketing to mommy</p>
<p class="article-body" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; Margin: 0; Margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: none; line-height: 20px; margin: 0 auto; margin-bottom: 10px; max-width: 600px; mso-hide: all; padding: 0; padding-bottom: 15px; text-align: left;"><strong style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; margin: 0 auto; max-width: 600px; mso-hide: all;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong> Suscipit
totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>

              &lt;div class="article-button-left" style="float: left; mso-hide: all;"&gt;
                &lt;a href="#" style="Margin: 0; color: black; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; mso-hide: all; padding: 0; text-align: left; text-decoration: none;"&gt;
                  &lt;div class="text-button" style="float: left; font-size: 0.8em; mso-hide: all; padding-right: 0.6em;"&gt;KEEP READING&lt;/div&gt;
                  &lt;div class="entity-arrow-right" style="float: left; margin-top: -2px; mso-hide: all;"&gt;&lt;/div&gt;
                &lt;/a&gt;
              &lt;/div&gt;

            &lt;/div&gt;
          &lt;/th&gt;
          &lt;th class="expander" style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; mso-hide: all; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/th&gt;
&lt;/tr&gt;

</tbody>
</table>

Posts Followed

Following

  • No Content

Followers

  • No Content