search

INN / umbrella-energynewsnetwork

Umbrella repository for the Energy News Network site, a project of Fresh Energy
https://energynews.us
GNU General Public License v2.0
0 stars 1 forks source link

CSS to fix email text size issue #75

Open MirandaEcho opened 4 years ago

MirandaEcho commented 4 years ago

The email text size renders too small in Gmail’s mobile apps (both iOS and Android). It has something to do with the photos triggering an auto-resize function in the app. (team to investigate)

benlk commented 4 years ago

Can we get a copy of one of these emails?

joshdarby commented 4 years ago

It has something to do with the photos triggering an auto-resize function in the app.

How did we determine this?

MirandaEcho commented 4 years ago

"It has something to do with the photos triggering an auto-resize function in the app – when you remove the photos the text looks fine"

As it arrives: image After "revert auto-sizing" is selected: image

joshdarby commented 4 years ago

So I'm only able to recreate this the opposite way of how it's reported:

The common solution seems to be something like this, but it isn't having much of an effect that I can see:

https://stackoverflow.com/questions/18388779/is-there-a-method-of-turning-off-the-gmail-apps-auto-resize-feature-in-an-email

joshdarby commented 4 years ago

Response from MC:

So with mobile texting and using our drag and drop templates, there is a way to choose mobile styling preferences that will help in display text as a certain size. Just in case, I went ahead and created a quick video in your account using a replicated campaign to help show you: https://d.pr/v/Q27Nab

To be completely up front, using mobile styling is the best way to control how your text is viewed on a mobile device. That being said, it is possible that certain mobile devices might view that text differently than setup, which I'm afraid we wouldn't have much control with how that mobile device views that information. However, controlling that text via the Mobile Styling tool is a great way to prevent resizing. The best troubleshooting that I would recommend is to test through different mobile devices that you have access to and see which ones are resulting in autom-sizing.

Just in case, more information on this can be found here: Edit and Test Mobile Styles in a Campaign: https://eepurl.com/dyilwD

benlk commented 4 years ago

On Android, I'm noticing that if we replace the 600px wide images with 400px wide images, the text before "Revert Auto Sizing" is larger.

My guess is that Gmail is sizing the container width based on the image contained within it, then laying out text proportional to the image's intrinsic size, and then shrinking the whole document to fit within the viewport, which decreases the apparent font size.

Increasing the font size in the mobile styles has little to no effect on Gmail, unfortunately.