Menu icon Foundation
Font Size on Mobile Email Clients is TOO SMALL

Hey, 

I've enjoyed using the Foundations for Email framework, but I'm finding that the font size on mobile is far too small (gmail, outlook, . 

Any advice for how to correct this? 

emailfont sizemobiletypography

Hey, 

I've enjoyed using the Foundations for Email framework, but I'm finding that the font size on mobile is far too small (gmail, outlook, . 

Any advice for how to correct this? 

Kevin Neal over 2 years ago

looks like you haven't included the closing } maybe?

Rafi Benkual over 2 years ago

 You can bump up the font size within a media query like:

 

@media only screen and (max-width: #{$global-breakpoint}) {
  font-size: 19px;
}

Kevin Neal over 2 years ago

I've used Rafi's solution and it works great when I preview in browser, but as soon as I upload to campaign monitor I'm finding that this new for size is being ignored 

 

EDIT : Actually it isn't campaign monitor causing this issue.. as soon as I run the build process then this media query is getting ignored

R. Martin over 2 years ago

Thanks Rafi, that looks promising. 

I added it to my app.scss file, but I think I must be missing something, because it throws an error when I run Foundation watch or build:

Error: undefined:1389:1: @media missing '}'

 

    at error (/home/rick/Documents/newsletter/node_modules/siphon-media-query/node_modules/css-parse/node_modules/css/lib/parse/index.js:62:15) (plus a bunch of other stuff to big to paste here, but that seems to be the key part)

Any ideas? (Apologies in advance, I'm not a CSS expert by any stretch, which is why I'm using Foundation to begin with.)

Thanks!

 

 

Kevin Neal over 2 years ago

Rafi, is this media query still working for you after you run foundation build?

R. Martin over 2 years ago

 

Ok, I managed to figure it out. Rafi's suggestion above (which was useful and got me on the right track) still breaks when I run "foundation watch" and "foundation build". But after fiddling, I found the following will work, and does not break everything:

@media only screen and (max-width: #{$global-breakpoint}) {

   p { font-size: 19px; } 

}   

 

Still some refining to do (to include headers and stuff), but getting there. Thanks!

 

Rafi Benkual over 2 years ago

You'll need to add !important to that rule since the inliner inlines the styles and the mobile specificity needs to win. Until we can get rid of inliners (gmail) this is necessary.