Menu icon Foundation

My Posts






My Comments

Stephen Rust commented on Stephen Rust's post about 3 years

It looks like I was able to eliminate the issue by removing font-families with quotes from my SCSS. 
For example:
.oldClass {
font-family: Georgia, "Times New Roman", Times, serif;
}

.newClass {
font-family: Georgia, Times, serif;
}

I've experienced this issue with font-declarations with quotes before with the Zurb Email Stack. Have you?

Stephen Rust commented on Stephen Rust's post about 3 years

After a bunch of tests, I've come to the conclusion that there must've been some strange character in that one affected line causing the error. When that particular variable is removed, all the lines are rendered correctly. 

Stephen Rust commented on Stephen Rust's post about 3 years

Thanks, Corey. I'll re-assign the {{ benefits }} variables, and remove punctuation from the front-matter blocks to see if that makes a difference. 
I also edited my previous post with screenshots of the issue occurring. 

Stephen Rust commented on Stephen Rust's post about 3 years

Hi Corey, and thanks for the reply. 
 
My issue is actually occurring in this section of the template:
<row class="bodyRow">
<columns small="12" large="12">
<center>
<h6 class="benefits text-center">
{{ benefit1 }}
</h6>
<h6 class="benefits text-center">
{{ benefit2 }}
</h6>
<h6 class="benefits text-center">
{{ benefit3 }}
</h6>
<h6 class="benefits text-center">
{{ benefit4 }}
</h6>
<h6 class="benefits text-center">
{{ benefit5 }}
</h6>
</center>
</columns>
</row>
You'll notice in the screenshots of the Litmus test I provided that the {{ benefit2 }} didn't receive the proper font assignment on iOS clients, while the other {{ benefits }} did. Not sure why that's occurring... 
On Outlook clients, the elements in this section are formatted correctly. This is Outlook 2007:

 
But on iOS devices, not all those elements get the right font assignments. Here's a screenshot from the iPhone 6 render: 

 
While I could insert the benefit content manually, I'd like to leverage Panini and Handlebars to automate the production of lots of these types of emails at once. 
 

Stephen Rust commented on Stephen Rust's post about 3 years

Thanks Corey, that's what I was looking for.

Stephen Rust commented on Emily Mentzer's post over 3 years

Hmm, without modifying the number of columns in the _settings.scss file, you won't be able to fill out the row with the required 12 columns. 
 
However, if you can left or right justify the social links, you can reduce the spacing with some floats.
 
Ex:
<container>
<row>
<columns small="12" large="12">
<h1 class="text-center">Social Icons Test</h1>
</columns>
</row>
<row>
<columns small="1" large="1">
<img class="float-left" src="http://lorempixel.com/25/25" alt="">
</columns>
<columns small="1" large="1">
<img class="float-left" src="http://lorempixel.com/25/25" alt="">
</columns>
<columns small="1" large="1">
<img class="float-left" src="http://lorempixel.com/25/25" alt="">
</columns>

<columns small="9" large="9">
<!-- 9 empty columns for other content-->
</columns>

</row>
</container>

Result:

Stephen Rust commented on Shakogun's post over 3 years

Bump for visibility. This is a major issue for me as well!

Stephen Rust commented on Emily Mentzer's post over 3 years

If I understand correctly, images are treated as block level elements, so they'll take up 100% of the width of their parent container. That's why they appear on separate lines on your example. 
I would suggest putting each image in it's own column so they're displayed horizontally inline instead of vertically.
Your Inky code would look something like this. 
<container>
<row>
<columns small="12" large="12">
<h1 class="text-center">Social Icons Test</h1>
</columns>
</row>
<row class="collapse">
<columns small="3" large="3">
<!-- Empty Column -->
</columns>
<columns small="2" large="2">
<center>
<img src="http://lorempixel.com/25/25" alt="">
</center>
</columns>
<columns small="2" large="2">
<center>
<img src="http://lorempixel.com/25/25" alt="">
</center>
</columns>
<columns small="2" large="2">
<center>
<img src="http://lorempixel.com/25/25" alt="">
</center>
</columns>

&lt;columns small="3" large="3"&gt;
  &lt;!-- Empty Column --&gt;
&lt;/columns&gt;  

</row>

</container>

Stephen Rust commented on Stephen Rust's post over 4 years

Posts Followed


  • 3
    Replies
  • Help with footer images

    By Emily Mentzer

    question

    We are creating a footer and would like three social icons to be close and centered under the contact information. Currently we have the contact information in columns, but they also are a little too spaced out. The social icons were also in columns, but ... (continued)

    Last Reply by Stephen Rust over 3 years ago



Following

    No Content

Followers

My Posts

My Comments

You commented on Stephen Rust's post about 3 years

It looks like I was able to eliminate the issue by removing font-families with quotes from my SCSS. 
For example:
.oldClass {
font-family: Georgia, "Times New Roman", Times, serif;
}

.newClass {
font-family: Georgia, Times, serif;
}

I've experienced this issue with font-declarations with quotes before with the Zurb Email Stack. Have you?

You commented on Stephen Rust's post about 3 years

After a bunch of tests, I've come to the conclusion that there must've been some strange character in that one affected line causing the error. When that particular variable is removed, all the lines are rendered correctly. 

You commented on Stephen Rust's post about 3 years

Thanks, Corey. I'll re-assign the {{ benefits }} variables, and remove punctuation from the front-matter blocks to see if that makes a difference. 
I also edited my previous post with screenshots of the issue occurring. 

You commented on Stephen Rust's post about 3 years

Hi Corey, and thanks for the reply. 
 
My issue is actually occurring in this section of the template:
<row class="bodyRow">
<columns small="12" large="12">
<center>
<h6 class="benefits text-center">
{{ benefit1 }}
</h6>
<h6 class="benefits text-center">
{{ benefit2 }}
</h6>
<h6 class="benefits text-center">
{{ benefit3 }}
</h6>
<h6 class="benefits text-center">
{{ benefit4 }}
</h6>
<h6 class="benefits text-center">
{{ benefit5 }}
</h6>
</center>
</columns>
</row>
You'll notice in the screenshots of the Litmus test I provided that the {{ benefit2 }} didn't receive the proper font assignment on iOS clients, while the other {{ benefits }} did. Not sure why that's occurring... 
On Outlook clients, the elements in this section are formatted correctly. This is Outlook 2007:

 
But on iOS devices, not all those elements get the right font assignments. Here's a screenshot from the iPhone 6 render: 

 
While I could insert the benefit content manually, I'd like to leverage Panini and Handlebars to automate the production of lots of these types of emails at once. 
 

You commented on Stephen Rust's post about 3 years

Thanks Corey, that's what I was looking for.

You commented on Emily Mentzer's post over 3 years

Hmm, without modifying the number of columns in the _settings.scss file, you won't be able to fill out the row with the required 12 columns. 
 
However, if you can left or right justify the social links, you can reduce the spacing with some floats.
 
Ex:
<container>
<row>
<columns small="12" large="12">
<h1 class="text-center">Social Icons Test</h1>
</columns>
</row>
<row>
<columns small="1" large="1">
<img class="float-left" src="http://lorempixel.com/25/25" alt="">
</columns>
<columns small="1" large="1">
<img class="float-left" src="http://lorempixel.com/25/25" alt="">
</columns>
<columns small="1" large="1">
<img class="float-left" src="http://lorempixel.com/25/25" alt="">
</columns>

<columns small="9" large="9">
<!-- 9 empty columns for other content-->
</columns>

</row>
</container>

Result:

You commented on Shakogun's post over 3 years

Bump for visibility. This is a major issue for me as well!

You commented on Emily Mentzer's post over 3 years

If I understand correctly, images are treated as block level elements, so they'll take up 100% of the width of their parent container. That's why they appear on separate lines on your example. 
I would suggest putting each image in it's own column so they're displayed horizontally inline instead of vertically.
Your Inky code would look something like this. 
<container>
<row>
<columns small="12" large="12">
<h1 class="text-center">Social Icons Test</h1>
</columns>
</row>
<row class="collapse">
<columns small="3" large="3">
<!-- Empty Column -->
</columns>
<columns small="2" large="2">
<center>
<img src="http://lorempixel.com/25/25" alt="">
</center>
</columns>
<columns small="2" large="2">
<center>
<img src="http://lorempixel.com/25/25" alt="">
</center>
</columns>
<columns small="2" large="2">
<center>
<img src="http://lorempixel.com/25/25" alt="">
</center>
</columns>

&lt;columns small="3" large="3"&gt;
  &lt;!-- Empty Column --&gt;
&lt;/columns&gt;  

</row>

</container>

You commented on Stephen Rust's post over 4 years

Posts Followed

Following

  • No Content

Followers