Is there any way of increasing text/font size when Email is read on phone?
Can we change CSS on Emails such as in this example?
@media only screen and (max-width: 480px){ .bodyContent{font-size:16px !important;} }
https://templates.mailchimp.com/development/responsive-email/increasing…
Or can we use font sizes that are responsive? Such as vw, wh, 1vmin, 1vmax
https://css-tricks.com/viewport-sized-typography/
I have an old question about responsive image sizes which is sort of similar here:
https://community.creatio.com/ideas/image-sizing-email-designer
Like
Julius,
We've analyzed your request and have some solution for you. Please check out all the steps to achieve such implementation:
1. When you just open the email designer, add "block" element and "HTML" element on this block.
2. Click settings (1) and apply "HTML design mode".
3. Here you click to the HTML block, then "Edit HTML" and you will see such document. I added my "div" with the message that will be sent. In my example it's "Hi all".
Here is the code itself:
div class="text-class"> Hi all</div>
4. Also I added CSS style:
Where (max-width: 480px) means that the style will be applied for devices with screen width less than or equal to 480px (here you need to check the particular width of the devises that will receive this emails and set it up to according to your business logic).
And I also created "text class", which is mentioned in the diff (p.3) ,where I applied "font-size: 40px;".
Here is the style code itself:
<style media="screen and (max-width:480px)">.text-class { font-size: 40px;}</style>
Basically, thats all I added - one div and style for it.
5. As for result, in preview you may see the difference beetween the desktop and phone mode, the phone text is higher, as you wish:
You may also add any styles you want and change it for your requirements.
P.S. Please also check this link, it might give you some additional tips of how to work with HTML in email templates:
https://academy.creatio.com/docs/user/marketing_tools/email_marketing/e…
Hopefully it helps!
Best Regards,
Bogdan L.
Hi Julius,
You can test all this and wherever CSS is supported, be it a web or a mobile application, the styles will work.
But resizing (for example, email) specifically for the web application open on the phone is impossible -
it will in any case convert the text according to the telephone mode, like any other site.
Here as an example with email template, you can change as you wish by base tools:
https://academy.creatio.com/docs/user/marketing_tools/email_marketing/e…
Also, if you are using Mobile App, you can modify it with custom CSS:
https://community.creatio.com/articles/adding-custom-css-mobile-applica…
Best Regards,
Bogdan L.
Hi Bogdan. I was unclear.
My goal is not to change the text size for Creatio users, but for the recipients of the email.
When the recipient opens the mail on phone, we'd like the text to be slightly larger.
Julius,
There is no such option in Creatio to change the text size for the third user.
Another user might use any kind of phone with a different operation system etc.
So you might find some useful info in Google on how to increase this text for a particular group of users who received emails.
Best Regards,
Bogdan L.
Julius,
We are double checking this question with our developer's team.
I'll let you know if we have additional information.
Thanks!
Julius,
We've analyzed your request and have some solution for you. Please check out all the steps to achieve such implementation:
1. When you just open the email designer, add "block" element and "HTML" element on this block.
2. Click settings (1) and apply "HTML design mode".
3. Here you click to the HTML block, then "Edit HTML" and you will see such document. I added my "div" with the message that will be sent. In my example it's "Hi all".
Here is the code itself:
div class="text-class"> Hi all</div>
4. Also I added CSS style:
Where (max-width: 480px) means that the style will be applied for devices with screen width less than or equal to 480px (here you need to check the particular width of the devises that will receive this emails and set it up to according to your business logic).
And I also created "text class", which is mentioned in the diff (p.3) ,where I applied "font-size: 40px;".
Here is the style code itself:
<style media="screen and (max-width:480px)">.text-class { font-size: 40px;}</style>
Basically, thats all I added - one div and style for it.
5. As for result, in preview you may see the difference beetween the desktop and phone mode, the phone text is higher, as you wish:
You may also add any styles you want and change it for your requirements.
P.S. Please also check this link, it might give you some additional tips of how to work with HTML in email templates:
https://academy.creatio.com/docs/user/marketing_tools/email_marketing/e…
Hopefully it helps!
Best Regards,
Bogdan L.