Menu icon Foundation
Layout breaks in iOS Mail

Hello,

I do have a problem with the "responsiveness" of my mail. In the Google Chrome preview, everything looks fine and is responsive as it should be - but on iOS iPhone 6 the layout is not going to "responsive". Any Ideas?

Thanks in advance :)


Here's my app.css:

@import 'settings';
@import 'foundation-emails';

body, table, tr, td {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: greycale;
}

//Prevent words from breaking
p, td {
word-break: break-word !important;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
border-collapse: collapse !important;
}

//Remove blue border from images
a {
  border-style: none !important;
}

//Remove blue iOS Links and add URL-Sheme for phone numbers
a[href^=tel] { color:#f29400; text-decoration:none;}
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
}

.callout-orange {
  color: #f29400 !important;
  background-color: #f29400 !important;
  border-radius: 8px !important;
}

.portal-bg {
  background-color: #eeeae7 !important;
  background: #eeeae7;
}

.footer {
  background-color: #faf9f7 !important;
  background: #faf9f7;
}

.channel {
  text-decoration: underline;
  font-weight: bold;
}

 

Here's the (inky) Code of the mail (partly):

---
title: Corporate Health Challenge
preheader: Die zweite Hälfte des Rennens hat begonnen. Auch wenn die Füße schmerzen und die Kraft schwindet, es liegen noch ein paar Runden vor Dir. Jetzt heißt es durchhalten und dabei bleiben!
---
<container>
  {{> logo}}
  <wrapper>
    <center>
      <img src="https://s3-eu-west-1.amazonaws.com/files.crsend.com/59000/59072/images/challenge/header/fitness.png" width="580" height="300" alt="moove Challenge" />
    </center>
  </wrapper>
  <spacer size="30"></spacer>
  <container>
    <row>
      <columns small="12" large="3">
        <p class="text-center">Hallo {FIRSTNAME[std:Du]},</p>
        <p class="text-center">die zweite Hälfte des Rennens hat begonnen. Auch wenn die Füße schmerzen und die Kraft schwindet, es liegen noch ein paar Runden vor Dir. Jetzt heißt es durchhalten und dabei bleiben!</p>
        <p class="text-center">So bleibst Du fit bis zum letzten Meter:</p>
      </columns>
    </row>
  </container>
</container>

ioslayoutResponsive

Hello,

I do have a problem with the "responsiveness" of my mail. In the Google Chrome preview, everything looks fine and is responsive as it should be - but on iOS iPhone 6 the layout is not going to "responsive". Any Ideas?

Thanks in advance :)


Here's my app.css:

@import 'settings';
@import 'foundation-emails';

body, table, tr, td {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: greycale;
}

//Prevent words from breaking
p, td {
word-break: break-word !important;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
border-collapse: collapse !important;
}

//Remove blue border from images
a {
  border-style: none !important;
}

//Remove blue iOS Links and add URL-Sheme for phone numbers
a[href^=tel] { color:#f29400; text-decoration:none;}
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
}

.callout-orange {
  color: #f29400 !important;
  background-color: #f29400 !important;
  border-radius: 8px !important;
}

.portal-bg {
  background-color: #eeeae7 !important;
  background: #eeeae7;
}

.footer {
  background-color: #faf9f7 !important;
  background: #faf9f7;
}

.channel {
  text-decoration: underline;
  font-weight: bold;
}

 

Here's the (inky) Code of the mail (partly):

---
title: Corporate Health Challenge
preheader: Die zweite Hälfte des Rennens hat begonnen. Auch wenn die Füße schmerzen und die Kraft schwindet, es liegen noch ein paar Runden vor Dir. Jetzt heißt es durchhalten und dabei bleiben!
---
<container>
  {{> logo}}
  <wrapper>
    <center>
      <img src="https://s3-eu-west-1.amazonaws.com/files.crsend.com/59000/59072/images/challenge/header/fitness.png" width="580" height="300" alt="moove Challenge" />
    </center>
  </wrapper>
  <spacer size="30"></spacer>
  <container>
    <row>
      <columns small="12" large="3">
        <p class="text-center">Hallo {FIRSTNAME[std:Du]},</p>
        <p class="text-center">die zweite Hälfte des Rennens hat begonnen. Auch wenn die Füße schmerzen und die Kraft schwindet, es liegen noch ein paar Runden vor Dir. Jetzt heißt es durchhalten und dabei bleiben!</p>
        <p class="text-center">So bleibst Du fit bis zum letzten Meter:</p>
      </columns>
    </row>
  </container>
</container>
Rafi Benkual over 2 years ago

Are you using the gmail app or Apple Mail?

It looks from your code that you have only one column. What behavior are you expecting that you are not seeing? Can you upload a pic?

mxeise over 2 years ago

Hello Rafi,

I'm using the native Apple Mail app. Sure I did some screenshots. Here's the behavior I was expection:

 

Mail on iPhone 6

 

And here is the actual mail, recieved on iPhone 6 (Apple Mail):

1

 

2

 

3

 

The images all have a defined width and height in the image-tag (not css). It's probably not a bug from the foundation framework, it's more likely that I missed something ... but I can't figure out what it is.

Thanks in advance for any help!

 

Best regards,


Max

mxeise over 2 years ago

Is this behaviour maybe occuring because I use the <container> Tag inside a <container>?

My basic structur looks like:

page

{{> header}}
<spacer size="20"></spacer>
<row>
  <columns>
    <p> Bit of text here</p>
  </columns>
</row>
{{> something}}
<spacer size="20"></spacer>
{{> footer}}

 

partial

<container>
  <row>
    <columns>
        <h1>Headline</h1>
    </columns>
  </row>
  <spacer size="20"></spacer>
  <row>
    <columns>
        <p>Teeeeeext</p>
    </columns>
  </row>
</container>

 

Is there anything wrong with it?


Best regards,

Max

Micheal Edwin over 1 year ago

Thanks a lot. Its reapply helpful for me. I have successfully able fix my issue.

 

Thanks and Regards

Tutuapp VIP

Vshare Market

Nox App Player

halloween over 1 year ago

Diy Tween Halloween costumes for Adult guys girls give you a great look in this festival days. Best funniest Tween Halloween costumes for hot girls most revealing.

Wally Glenn over 1 year ago

 I really want to get posting lessons from halloween. They're obviously posting spam, but the posts make it to the thread just fine and there's no way to mark it as spam.

I'm trying to get problems solved, find solutions for others, but my posts always get automatically marked spam, so they go dark until someone fixes something and they pop up days or weeks later.

halloween, what is your secret?

Jacob Ajjarapu 11 months ago

Micheal Edwin- 

What was the solution?