Menu icon Foundation

My Posts




My Comments

Brandon L Shinholser commented on Brandon L Shinholser's post over 3 years

Thanks Rafi & Corey.
I retraced my steps and apparently I had a spacer in my markup that was causing the breakage. I also altered my markup slightly from specifying the small="#" to simply <columns></columns>. Remedied both of the issues I was seeing in Litmus.
Oddness. But thanks so much guys for both of your input and patience.

Brandon L Shinholser commented on Brandon L Shinholser's post over 3 years

Thanks Corey and Rafi. I'm going to run some more tests either this afternoon or first thing in the AM and see if I can figure out the source of the issue. I'll stop by to follow up soon after.

Brandon L Shinholser commented on Brandon L Shinholser's post over 3 years

Oh, yes, I posted it in my initial post.
<row>
<columns small="12" large="12">
<button class="large" href="http://www.test.com/"&gt;View Contact Info</button>
</columns>
</row>
I've been testing the emails in Litmus. I'm beginning to wonder if I'd get a different result by testing Outlook 07, 10, 13 in Email on Acid.
But yes, for over a month I've tested the buttons from Litmus on several occasions and the same issue arises.

Brandon L Shinholser commented on Brandon L Shinholser's post over 3 years

Honestly, I stopped trying to get the buttons to work weeks ago and resorted to other methods until those started breaking more heavily across Outlook due to the hacks. And then I revisited using the Foundation buttons again, and the same problem happens where there's just no vertical height on the buttons in Outlook 07, 10, 13.
Yeah, here's the inlined:
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%">
<tr style="padding: 0; text-align: left; vertical-align: top">
<th style="Margin: 0; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left">
<table class="spacer" 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"><td height="15px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 15px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word">&#xA0;</td></tr></tbody></table>
<table class="button" style="Margin: 0 0 16px 0; border-collapse: collapse; border-spacing: 0; margin: 0 0 16px 0; padding: 0; text-align: left; vertical-align: top; width: auto !important">
<tr style="padding: 0; text-align: left; vertical-align: top">
<td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%">
<tr style="padding: 0; text-align: left; vertical-align: top">
<td style="-moz-border-radius: 5px; -moz-hyphens: auto; -webkit-border-radius: 5px; -webkit-hyphens: auto; Margin: 0; background: #971502; background-color: #a3322a; border: 2px solid #971502; border-collapse: collapse !important; border-radius: 5px; color: #fefefe; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word"><a href="http://www.test.com/" style="Margin: 0; border: 0px solid #971502; border-radius: 3px; color: #fefefe; display: inline-block; font-family: 'Raleway', Helvetica, arial, sans-serif; font-size: 16px !important; font-weight: normal; line-height: 1.4; margin: 0; padding: 13px 25px !important; text-align: left; text-decoration: none">View Contact Info</a></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="spacer" 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"><td height="15px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 15px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word">&#xA0;</td></tr></tbody></table>
</th>
</tr>
</table>
And here's the output, not inlined:
<table class="button">
<tr>
<td>
<table>
<tr>
<td><a href="http://www.test.com/"&gt;View Contact Info</a></td>
</tr>
</table>
</td>
</tr>
</table>
Thanks Corey!

Brandon L Shinholser commented on Ian Daly's post over 3 years

Thanks Ian. Yeah, I just started testing with Email on Acid as opposed to Litmus and haven't seen any of the breakage that was occurring in Litmus. Very strange.
Indeed, F4E handles images well, makes it much easier to support retina.

Brandon L Shinholser commented on Ian Daly's post over 3 years

Hey guys,
Just wanted to touch base -- I signed up for Email on Acid to test my original layout as well as your solutions, and apparently, all of our layouts work according to Email on Acid. Litmus, however, gives completely different results. The issue lies somewhere else.
Thanks again for all of your help!

Brandon L Shinholser commented on Ian Daly's post over 3 years

Thanks, Corey.
I don't know why, but it seems to work in the screenshots shown on Email On Acid, but does not work in the screenshots from Litmus. I've ripped the layout apart, coded it 3-4 different times, used your code, and no matter what, I can't get the layout to work with a sidebar on Litmus tests for Android Gmail.

Brandon L Shinholser commented on Ian Daly's post over 3 years

Corey,
Exactly. It's pushing the container down, and even if you remove all of the images and replace them with text, you get the same result.

Brandon L Shinholser commented on Ian Daly's post over 3 years

Rafi,
Rafi, The same thing is happening -- click the link you posted from Litmus, scroll to Detail view for Gmail App (Android) and you'll see the same thing occur -- the sidebar is tossed below the left-side. This is the problem I'm having, only occurring in Gmail Android.
 

Brandon L Shinholser commented on Ian Daly's post over 3 years

Here's your code, with my only edits being made to the large="" and small="" (to make the layout remain in desktop view) and removing the "show-for-large" tag. I also fixed one of the closing <wrappers> from your initial post.
As you see above, in Android, the large layout still breaks and the sidebar falls below the left column.
---

subject: My Email Subject

<container>

<!-- Hero Image -->
<row>
<columns small="12" large="12" >
<a href="test.html" target="_blank">
<img src="http://placehold.it/580x200" alt="Hero Graphic">
</a>
</columns>
</row>
<!-- / Hero Image -->

<row>
<columns small="9" large="9">
<!-- if you add a class to the wrapper you should be able to add your background color and border -->
<wrapper>
<row>
<columns>
<h5>List of Sales</h5>
</columns>
</row>
<row>
<columns small="3" large="3">
<img src="http://placehold.it/150x150" class="center-float">
</columns>
<columns small="9" large="9">
<h5>This is a title here</h5>
<p>The type of sale</p>
<p>More copy to go here. Lipsum copy to go here. Lipsum copy to go here.</p>
<p>Boise, ID 83706</p>
<button href="http://placehold.it" class="extend">Started Fr. Nov 5, 2015 Ends Tues Nov 10, 2015</button>
</columns>
</row>
<row>
<columns small="3" large="3">
<img src="http://placehold.it/150x150" class="center-float">
</columns>
<columns small="9" large="9">
<h5>This is a title here</h5>
<p>The type of sale</p>
<p>More copy to go here. Lipsum copy to go here. Lipsum copy to go here.</p>
<p>Boise, ID 83706</p>
<button href="http://placehold.it" class="extend">Started Fr. Nov 5, 2015 Ends Tues Nov 10, 2015</button>
</columns>
</row>
<row>
<columns>
<h5>National Sales</h5>
</columns>
</row>
<row>
<columns small="3" large="3">
<img src="http://placehold.it/150x150" class="center-float">
</columns>
<columns small="9" large="9">
<h5>This is a title here</h5>
<p>The type of sale</p>
<p>More copy to go here. Lipsum copy to go here. Lipsum copy to go here.</p>
<p>Boise, ID 83706</p>
<button href="http://placehold.it" class="extend">Started Fr. Nov 5, 2015 Ends Tues Nov 10, 2015</button>
</columns>
</row>
</wrapper>
</columns>
<columns small="3" large="3">
<wrapper>
<row>
<columns>
<a href="">
<img src="http://placehold.it/200x200?text=Want+Less+Email">
</a>
</columns>
</row>
</wrapper>
<row>
<columns>
<a href="">
<img src="http://placehold.it/200x600?text=Want+Less+Email">
</a>
</columns>
</row>

  &lt;row&gt;
    &lt;columns&gt;
      &lt;a href=""&gt;
        &lt;img src="http://placehold.it/200x600?text=Want+Less+Email"&gt;
      &lt;/a&gt;
    &lt;/columns&gt;
  &lt;/row&gt;


&lt;/columns&gt;

</row>

</container>

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Brandon L Shinholser's post over 3 years

Thanks Rafi & Corey.
I retraced my steps and apparently I had a spacer in my markup that was causing the breakage. I also altered my markup slightly from specifying the small="#" to simply <columns></columns>. Remedied both of the issues I was seeing in Litmus.
Oddness. But thanks so much guys for both of your input and patience.

You commented on Brandon L Shinholser's post over 3 years

Thanks Corey and Rafi. I'm going to run some more tests either this afternoon or first thing in the AM and see if I can figure out the source of the issue. I'll stop by to follow up soon after.

You commented on Brandon L Shinholser's post over 3 years

Oh, yes, I posted it in my initial post.
<row>
<columns small="12" large="12">
<button class="large" href="http://www.test.com/"&gt;View Contact Info</button>
</columns>
</row>
I've been testing the emails in Litmus. I'm beginning to wonder if I'd get a different result by testing Outlook 07, 10, 13 in Email on Acid.
But yes, for over a month I've tested the buttons from Litmus on several occasions and the same issue arises.

You commented on Brandon L Shinholser's post over 3 years

Honestly, I stopped trying to get the buttons to work weeks ago and resorted to other methods until those started breaking more heavily across Outlook due to the hacks. And then I revisited using the Foundation buttons again, and the same problem happens where there's just no vertical height on the buttons in Outlook 07, 10, 13.
Yeah, here's the inlined:
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%">
<tr style="padding: 0; text-align: left; vertical-align: top">
<th style="Margin: 0; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left">
<table class="spacer" 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"><td height="15px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 15px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word">&#xA0;</td></tr></tbody></table>
<table class="button" style="Margin: 0 0 16px 0; border-collapse: collapse; border-spacing: 0; margin: 0 0 16px 0; padding: 0; text-align: left; vertical-align: top; width: auto !important">
<tr style="padding: 0; text-align: left; vertical-align: top">
<td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%">
<tr style="padding: 0; text-align: left; vertical-align: top">
<td style="-moz-border-radius: 5px; -moz-hyphens: auto; -webkit-border-radius: 5px; -webkit-hyphens: auto; Margin: 0; background: #971502; background-color: #a3322a; border: 2px solid #971502; border-collapse: collapse !important; border-radius: 5px; color: #fefefe; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word"><a href="http://www.test.com/" style="Margin: 0; border: 0px solid #971502; border-radius: 3px; color: #fefefe; display: inline-block; font-family: 'Raleway', Helvetica, arial, sans-serif; font-size: 16px !important; font-weight: normal; line-height: 1.4; margin: 0; padding: 13px 25px !important; text-align: left; text-decoration: none">View Contact Info</a></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="spacer" 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"><td height="15px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 15px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word">&#xA0;</td></tr></tbody></table>
</th>
</tr>
</table>
And here's the output, not inlined:
<table class="button">
<tr>
<td>
<table>
<tr>
<td><a href="http://www.test.com/"&gt;View Contact Info</a></td>
</tr>
</table>
</td>
</tr>
</table>
Thanks Corey!

You commented on Ian Daly's post over 3 years

Thanks Ian. Yeah, I just started testing with Email on Acid as opposed to Litmus and haven't seen any of the breakage that was occurring in Litmus. Very strange.
Indeed, F4E handles images well, makes it much easier to support retina.

You commented on Ian Daly's post over 3 years

Hey guys,
Just wanted to touch base -- I signed up for Email on Acid to test my original layout as well as your solutions, and apparently, all of our layouts work according to Email on Acid. Litmus, however, gives completely different results. The issue lies somewhere else.
Thanks again for all of your help!

You commented on Ian Daly's post over 3 years

Thanks, Corey.
I don't know why, but it seems to work in the screenshots shown on Email On Acid, but does not work in the screenshots from Litmus. I've ripped the layout apart, coded it 3-4 different times, used your code, and no matter what, I can't get the layout to work with a sidebar on Litmus tests for Android Gmail.

You commented on Ian Daly's post over 3 years

Corey,
Exactly. It's pushing the container down, and even if you remove all of the images and replace them with text, you get the same result.

You commented on Ian Daly's post over 3 years

Rafi,
Rafi, The same thing is happening -- click the link you posted from Litmus, scroll to Detail view for Gmail App (Android) and you'll see the same thing occur -- the sidebar is tossed below the left-side. This is the problem I'm having, only occurring in Gmail Android.
 

You commented on Ian Daly's post over 3 years

Here's your code, with my only edits being made to the large="" and small="" (to make the layout remain in desktop view) and removing the "show-for-large" tag. I also fixed one of the closing <wrappers> from your initial post.
As you see above, in Android, the large layout still breaks and the sidebar falls below the left column.
---

subject: My Email Subject

<container>

<!-- Hero Image -->
<row>
<columns small="12" large="12" >
<a href="test.html" target="_blank">
<img src="http://placehold.it/580x200" alt="Hero Graphic">
</a>
</columns>
</row>
<!-- / Hero Image -->

<row>
<columns small="9" large="9">
<!-- if you add a class to the wrapper you should be able to add your background color and border -->
<wrapper>
<row>
<columns>
<h5>List of Sales</h5>
</columns>
</row>
<row>
<columns small="3" large="3">
<img src="http://placehold.it/150x150" class="center-float">
</columns>
<columns small="9" large="9">
<h5>This is a title here</h5>
<p>The type of sale</p>
<p>More copy to go here. Lipsum copy to go here. Lipsum copy to go here.</p>
<p>Boise, ID 83706</p>
<button href="http://placehold.it" class="extend">Started Fr. Nov 5, 2015 Ends Tues Nov 10, 2015</button>
</columns>
</row>
<row>
<columns small="3" large="3">
<img src="http://placehold.it/150x150" class="center-float">
</columns>
<columns small="9" large="9">
<h5>This is a title here</h5>
<p>The type of sale</p>
<p>More copy to go here. Lipsum copy to go here. Lipsum copy to go here.</p>
<p>Boise, ID 83706</p>
<button href="http://placehold.it" class="extend">Started Fr. Nov 5, 2015 Ends Tues Nov 10, 2015</button>
</columns>
</row>
<row>
<columns>
<h5>National Sales</h5>
</columns>
</row>
<row>
<columns small="3" large="3">
<img src="http://placehold.it/150x150" class="center-float">
</columns>
<columns small="9" large="9">
<h5>This is a title here</h5>
<p>The type of sale</p>
<p>More copy to go here. Lipsum copy to go here. Lipsum copy to go here.</p>
<p>Boise, ID 83706</p>
<button href="http://placehold.it" class="extend">Started Fr. Nov 5, 2015 Ends Tues Nov 10, 2015</button>
</columns>
</row>
</wrapper>
</columns>
<columns small="3" large="3">
<wrapper>
<row>
<columns>
<a href="">
<img src="http://placehold.it/200x200?text=Want+Less+Email">
</a>
</columns>
</row>
</wrapper>
<row>
<columns>
<a href="">
<img src="http://placehold.it/200x600?text=Want+Less+Email">
</a>
</columns>
</row>

  &lt;row&gt;
    &lt;columns&gt;
      &lt;a href=""&gt;
        &lt;img src="http://placehold.it/200x600?text=Want+Less+Email"&gt;
      &lt;/a&gt;
    &lt;/columns&gt;
  &lt;/row&gt;


&lt;/columns&gt;

</row>

</container>

Posts Followed

Following

  • No Content

Followers

  • No Content