Menu icon Foundation

My Posts


  • 2
    Replies
  • Outlook showing images at 100%

    By Joel Smith

    outlook images

    I have just sent my first test email using Foundation and Inky. On mobile it looks ok (although not responsive?). But in Outlook, all images are being blown up to 100% rather than fitting to their set columns. Has anyone seen this issue before, and how ... (continued)

    Last Reply by Joel Smith about 2 years ago


  • 4
    Replies
  • adding new colors to _settings.scss

    By Joel Smith

    color

    I am trying to add my own colours to _settings.scss so I can customise my heading colour in Foundation for Emails.   I have added the following code to _settings.scss: $pink: #ee2b53;   and then withing index.html I have <h1 class="pink... (continued)

    Last Reply by Joel Smith about 2 years ago


My Comments

Joel Smith commented on Joel Smith's post almost 2 years

 
Thanks for alerting the engineers.  I absolutely understand what you're saying about Gmail media query support, but I hope this can be fixed in Foundation so that it works in other mail clients such as the native Android and iOS apps.

Joel Smith commented on Joel Smith's post almost 2 years

So I guess this is a genuine bug in Foundation. It's a shame because the majority of emails on mobile are viewed on devices that do support media queries.

Joel Smith commented on Joel Smith's post almost 2 years

Thanks Corey, I don't think that's the problem though as "show-for-large" is working for me when I test on mobile email browsers.
 
The "hide-for-large" problem is occurring when I just view the "dist/index.html" in Chrome, without even sending the email. So something is fundamentally changing between running npm start and npm run build.

Joel Smith commented on Joel Smith's post about 2 years

Thanks Rafi. Surely this mean that the images won't actually be responsive though.
If I hard code the image to 600px width then it is not going to resize as the viewport changes.
 
In my particular layout I have three images side by side in columns. On a large screen, each image will display at 172px wide. Then when I change to a small screen the 3 columns will stack on top of each other and the image should fill the width of the email, ie 518px.
If I hard code the width as you suggest, I will end up with a 172px image in a 518px space.
 
 

Joel Smith commented on Joel Smith's post about 2 years

Thank you again Derek, that's a great help.
 
I'm surprised there is not more info about styling the official docs.

Joel Smith commented on Joel Smith's post about 2 years

 
Ah, ok I understand! Thanks Derek.
 
So, out of interest where are all the CSS definitions for the Sass variable that are included as default in settings.scss and can these be edited?

Posts Followed


Following

    No Content

Followers

My Posts



My Comments

You commented on Joel Smith's post almost 2 years

 
Thanks for alerting the engineers.  I absolutely understand what you're saying about Gmail media query support, but I hope this can be fixed in Foundation so that it works in other mail clients such as the native Android and iOS apps.

You commented on Joel Smith's post almost 2 years

So I guess this is a genuine bug in Foundation. It's a shame because the majority of emails on mobile are viewed on devices that do support media queries.

You commented on Joel Smith's post almost 2 years

Thanks Corey, I don't think that's the problem though as "show-for-large" is working for me when I test on mobile email browsers.
 
The "hide-for-large" problem is occurring when I just view the "dist/index.html" in Chrome, without even sending the email. So something is fundamentally changing between running npm start and npm run build.

You commented on Joel Smith's post about 2 years

Thanks Rafi. Surely this mean that the images won't actually be responsive though.
If I hard code the image to 600px width then it is not going to resize as the viewport changes.
 
In my particular layout I have three images side by side in columns. On a large screen, each image will display at 172px wide. Then when I change to a small screen the 3 columns will stack on top of each other and the image should fill the width of the email, ie 518px.
If I hard code the width as you suggest, I will end up with a 172px image in a 518px space.
 
 

You commented on Joel Smith's post about 2 years

Thank you again Derek, that's a great help.
 
I'm surprised there is not more info about styling the official docs.

You commented on Joel Smith's post about 2 years

 
Ah, ok I understand! Thanks Derek.
 
So, out of interest where are all the CSS definitions for the Sass variable that are included as default in settings.scss and can these be edited?

Posts Followed

Following

  • No Content

Followers

  • No Content