[Pro] Increasing font sizes in html email for mobile

Hoping someone knows a fix…
I’m trying to get font sizes to increase in an html email generated in FW7 using the email action and an inline table structure. All of the styles have been inlined and I have tried targeting everything from the TABLES/TD’S to paragraph using @media queries at breakpoints like so:

@media only screen and (max-device-width: 480px) { p { font-size:20px !important } /* this isn't working */ #content { font-size:20px !important } /* nor is this working */ .content { font-size:20px !important } /* neither is this */ }

Note: I’ve tried each of these individually first.

As you can see I I’ve tried to target the id name for a section, I’ve added class names to sections and none of the calls to force the font size to display larger is working. I don’t know if it is inherently unique to the way Freeway handles emails and the code overriding the commands in the css or what.

Has anyone else encountered this issue and know of a solution? Any help would be appreciated. Thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think that you should use a base font size in em (ie 1em) and then use the media query to increase that for phones etc.

Something like

@media only screen and (max-device-width: 480px) {
   table {font-size:1.2em;}
}

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks David.

I looked around and found an article thebigerns posted
http://cssway.thebigerns.com/products/flexible-typography/

This is using that method and it looked like it might work for me but I still haven’t been able to get the main body copy to grow in size correctly. It looks like it’s increasing the line space and/or space between paragraphs only and also tables with images are growing as well when applied to the body tag using his method. I think the main problem is that the inlining method that Freeway uses strips out some of the extended code where it is needed.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think the main problem is that the inlining method that Freeway uses strips out some of the extended code where it is needed.

Dont know about Ernies method but you shouldn’t need any extended code to set a base font size.

Can we see this online somewhere?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Frank, the article you see is about users electively scaling text in their
browsers… I can see that I need to explain that background better.

Email browsers are all over the map when it comes to rendering standards –
which is why everyone recommends absolute primitive strategies like table
layouts and inline styling. I do a few email newsletters for my clients
each month and am absolutely frustrated with the process. Freeway never
gives me code that I don’t have to clean or repair before sending it off.

I’m making inline/inflow layouts for my html email – Create Email action
keeps the div structure but within a Table container. Here’s an old one you
can check the code against – http://tinyurl.com/kug3e25

If you successfully change the size of the p tag, then images and
everything wrapped in p tags resizes. Freeway, I think, makes the p tag the
mandatory wrapper of cell content, so that may explain some of what you’re
seeing.


Ernie Simpson

On Mon, Nov 17, 2014 at 12:11 AM, Frank Bridges email@hidden wrote:

Thanks David.

I looked around and found an article thebigerns posted
http://cssway.thebigerns.com/products/flexible-typography/

This is using that method and it looked like it might work for me but I
still haven’t been able to get the main body copy to grow in size
correctly. It looks like it’s increasing the line space and/or space
between paragraphs only and also tables with images are growing as well
when applied to the body tag using his method. I think the main problem is
that the inlining method that Freeway uses strips out some of the extended
code where it is needed.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you successfully change the size of the p tag, then images and everything wrapped in p tags resizes. Freeway, I think, makes the p tag the mandatory wrapper of cell content, so that may explain some of what you’re seeing.

It would be outermost interesting to know what happens, if you apply the RemoveParagraph Action to the (image) parent DIV or even one DIV above (however I’m fear if there is some publishing clash between those actions).

Worth a try?

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I will do some more testing and then post a redacted version of my email online so you can see the code and what I am trying. Thanks for all the input.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options