1

As noted, this is for email templates, read in email clients like gmail, yahoo mail, Mail (ios app) and etc. Because of this. I cannot use jQuery, @media queries are stripped down, and classes also.

So I had a fixed font-size, but because on gmail on phones the width is smaller, a lot of times the text gets wrapper into 2 lines. What I want to do is to use a width dependent font-size. So what I tried was using vw like this:

 <p style="font-family: 'Lato', sans-serif; font-size: 2.5vw;font-weight: bold;line-height: 34px; padding: 0 5%; margin: 5% 0 0 0; color: #24b646;">
        {{title}}
    </p>
</td>

My problem is that, even tho' my main view has max-width 640px. In order to set the fontsize it calculates on all the width.

So this has a weird effect. Even if the View itself is 640px, because the TAB is bigger, the text becomes bigger

From:

enter image description here

To:

enter image description here

Is it someway possible to make it so that vw will use the width of the parent as the dependent variable? If not, what else can I use, so that the font size will be dependent strictly on it's parent? (Either 640px - the max width for pc's, or on mobile, the width of the screen)

Syfer
  • 4,262
  • 3
  • 20
  • 37
rosu alin
  • 5,674
  • 11
  • 69
  • 150
  • @Paulie_D Please unmark this question as a DUPLICATE, because it is not. And read again the requirements. This is as I and Max Ploner lower stated for Django Templating Emails. Which means, that the media queries, classes are stripped down by gmail, ymail and most email client. Also jQuery is not allowed. So the questions that you gave as duplicates, do not answer my question, being done in jQuery:( – rosu alin Jan 22 '19 at 16:37
  • Have you tried percentage in media queries? Roughly 95% of email clients support media queries. – Syfer Jan 23 '19 at 06:49
  • Works except for mobile versions of gmail and ymail and the mail app of ios – rosu alin Jan 23 '19 at 20:56
  • Sorry but mobile versions of Gmail do support media queries unless they haven&#39;t been updated in ages. Y mail (Yahoo?) Supports media queries in the body of the email. Mail iOS app would do it but can't check your code as it's not provided. – Syfer Jan 23 '19 at 20:59
  • 1
    I get at work tomorrow and I will look into this, thanks a lot. Now that I know it has to work I'll look a bit more into my media queries that I had I will also post my code here – rosu alin Jan 23 '19 at 21:21

1 Answers1

1

Unfortunately, it seems, that it's not possble in CSS. Take a look at these two questions:

The solutions offered there use JavaScript which can not be run in the email client. But a possible work around could be to write the text to a svg image and scale it (though usually text should be included as text).

CSS Tricks explains a few font-sizing options, the last one might be the one you're looking for (using svg-text).

Max Ploner
  • 31
  • 3
  • Thanks, I'm going to take a look and let you know what I managed to do – rosu alin Jan 22 '19 at 16:31
  • Hey, sorry for the late response, tried it today with svg, but it's still static (not auto-sizing) – rosu alin Jan 30 '19 at 14:46
  • Is this problem email client specific ie. does it work if you resize the template in the browser window? Can you show how you implemented the svg (maybe in a stripped down variation)? – Max Ploner Jan 31 '19 at 18:59
  • this goes through the mail client. For Example. my API creates the template, and sends an email to example.email.com. Then I open on my phones Gmail Client or YMail client and the text does not work. I can't resive the browser window on my phone. And yes, it does work if I take the template I have , move the code in a html file and open in Chrome and user responsive. But I don't need it to run in Chrome, I need it to work in all mail clients, including mobile ones – rosu alin Feb 01 '19 at 11:42