Gmail: revert auto-sizing

baraka

Hi,
When I send newsletter with Acymailing 7.2, in Gmail and Outlook apps it shows small fonts.
In Gmail I can select "revert auto-sizing", but it would be fine if clients wouldn't need to do it.
Could you help me?
Thanks!

joomleb

baraka
I'm having too some dimension issues by using Gmail with emails received by AcyMailing (something it is not happening with others emails sender)
Please, Can you describe better what is happening exactly to you ?

joomleb

mihha
I'm not sure it is a client email bug. Let me explain why:
A - Gmail has the option to "Auto-fit messages" > this means that when selected Gmail should auto-fit messages. "Auto-fit messages" selected is by default.
B - as described from baraka if selected the email is not auto-fit and the email is shown with "smaller fonts", as far as I understand the opposite of the feature, no ?!?
C - baraka has tested it also with the Outlook App
D - I'm having back the same issue with Gmail on my Smartphone, but not on my Tablet (the same Gmail version)
E - If I rotate horizontally my smartphone ("bigger width layout") the issue disappear and the email is auto-fitted (bigger fonts)
E - I'm having back the issue only with the emails received through AcyMailing
F - Turning off, unselect, the "Auto-fit messages" option is a workaround that fix the bug.

Total, from my point of view there is an issue/incompatibility/crash that should be investigated and could be related with the Foundation media query use.
For example: Foundation for Emails has one breakpoint: Small: 596 pixels or smaller and into the AcyMailing media / com_acym / css / libraries / foundation_email.min.css file there are 7 occurrences of 580px, Why ?

1 - Some suggested fixes that AcyMailing Team should test. Please, Can AcyMailing Team check it ?
2 - If a fix cannot be found, a workaround by adding a forced "Auto-fit messages: off" into the email head template should be suggested from AcyMailing Team and added to the documentation. Please, Can AcyMailing Team suggest the best quick workaround here ?

mihha

This is strictly email client feature, and I am afraid that we can't influence on that from the newsletter

Dax

joomleb Where did this 596px come from? The main width used in our foundation for email configuration is 580px, but it doesn't impact the media queries (that are based on the screen size, not the content size).

From what I could see, the auto-fit messages option is a Gmail feature that purposefully modifies the correct display of the email to display the texts smaller. Since this is a Gmail feature, and since it does what it's supposed to do I'm afraid there's nothing we can do on our end.
I took a look at the stackoverflow thread you shared, the !important css marker isn't something we can safely use, and the viewport meta tag is already used in AcyMailing to make the media queries trigger correctly.

mihha

I will alert developers to check this topic and reply back

joomleb

mihha really many thanks, I'll stay tuned here...

PS - While investigating on media queries and the related point 1 seems can help on find a solution fix, the point 2 could be just a temporally workaround (waiting instructions from the Team I have not yet tested them), because unselecting the "Auto-Fit messages" disable the Gmail "pinch to zoom" email feature...

Please, Let me know if I have to open a GitHub ticket...

joomleb

Opened a Auto-fit messages on mobile - BUG #46 GitHub ticket

joomleb

Dax
"Where did this 596px come from?" - I gave you the Foundation Media Queries for Email page, anyway I add also an image - Do you see the 596 px mention ?

About auto-fit Gmail messages - I described in detail the A to F points of because it seems to be just an AcyMailing issue with the auto-fit feature (point C it seems to be also on Outlook) OR, maybe, all the other Mailing Sender has added a workaround for it (I have no the knowledge to investigate it well, sorry)
Can this discussion help on it ?

Chou558
Many Thanks for your suggestion, Please, I'm not a "developer", Can you help me with a step by step instructions ?

"....or the style tag in general..." = So, your workaround fix should be able to fix also this BUG, right ?

Please, @Dax Can you take a look on it and let us know ?

Chou558

Gmail in general doesn't support media queries, or the style tag in general, which is why we have to move everything inline.

joomleb

Hi Dax
Many Thanks fo your answer. As I yet wrote, I'm not a developer and, unfortunately, my knowledge does not permit me to help more by looking at the codes in detail. But I'm here in a proactive way, ready to help and looking for a solution. Vice-versa i am a polite Joomler from its birth, august 2005, so I'm sorry you were offended.

Looking for what I called a "BUG", from wikipedia: "...an error, flaw or fault in a computer program or system that causes it to produce an incorrect or unexpected result, or to behave in unintended ways...".
Just Gmail, not Outlook, is used by 1.8 billion people, around the 80% of users, 90% with Outlook.
I think these are good reasons to justify an investigation.

"... I really don't like it when you brand something as a bug in AcyMailing to obtain assistance..." = I'm sorry, but I never branded as a bug in AcyMailing, I wrote: "...I described in detail the A to F points of because it seems to be just an AcyMailing issue with the auto-fit feature (point C it seems to be also on Outlook) OR, maybe, all the other Mailing Sender have added a workaround for it (I have no the knowledge to investigate it well, sorry)...". I based my deductions in special on these four tests:
C - @baraka has tested it also with the Outlook App
D - I'm having back the same issue with Gmail on my Smartphone, but not on my Tablet (the same Gmail version)
E - If I rotate horizontally my smartphone ("bigger width layout") the issue disappear and the email is auto-fitted (bigger fonts)
F - I'm having back the issue only with the emails received through AcyMailing

About the manual deactivation of the Gmail app option - "...the point 2 could be just a temporally workaround (waiting instructions from the Team I have not yet tested them), because unselecting the "Auto-Fit messages" disable the Gmail "pinch to zoom" email feature..."

What do you think about the Chou558 suggestion ? (I'm not able to test it because I didn't understand how to apply it)

<meta name="viewport" content="width=device-width, initial-scale=1"/>
Then set the style attribute on an image (1px gif works) that spans the full width of the page (style="min-width:600px;"). Everything will be laid out correctly, and it'll be scrollable.
Gmail in general doesn't support media queries, or the style tag in general, which is why we have to move everything inline.

Please, Can that workaround be able to fix also this text/span/dimension "BUG" ?

joomleb

Chou558 Please,

"...Then set the style attribute on an image (1px gif works) that spans the full width of the page (style="min-width:600px;")..."
I can add a Backround image / Image to a block and set the (style="min-width:600px;") by editing the HTML, right ?
Please, Do I have to use a 1px x 1px image or a 1px x 600px image ?
PS - All the images has a "max-width: 100%" by default, when I try to edit it with the style="min-width:600px;" and save, the new min-width attribute is not saved... here an image
By adding the min-width attribute in this way it is not running

Dax

About auto-fit Gmail messages - I described in detail the A to F points of because it seems to be just an AcyMailing issue with the auto-fit feature

That's quite the opposite actually, you just described that Gmail had a working feature, whose effects are unwanted by you.
I would gladly search for a way to "break" Gmail's feature for emails built with AcyMailing, but I really don't like it when you brand something as a bug in AcyMailing to obtain assistance.

I read the entire conversation you shared, and it sadly didn't give any other solution than the manual deactivation of the Gmail app option by the end user: https://github.com/foundation/foundation-emails/issues/122#issuecomment-142549912
The conversation then shifts to a media query issue and they ended up changing the <td> elements into <th> elements to make their blocks display below one another.

They do mention at the beginning that removing the min-width applied on the <center> element could help, but I can see that this min-width is already removed for small screens with a media query in foundation for emails.
If the media queries don't work on this phone app it would be quite difficult to have a solution, I can't remove the min-width in foundation for emails because it would break the email's layout in the other mail clients.

joomleb

Hi guys,
I did a lot of tests and I found the cause of the bug.
First of all I want to specify, to say: the function "Auto-fit messages" active by default in Gmail (and others email clients) is not working as expected means:

expected behavior: text should be automatically enlarged / zoomed on small screens (smartphones and tablets)
behavior found: text is not enlarged on small screens
I say this because many of the links I have provided have the reverse purpose (like these CSS tricks), to disable this default function by "tricking" it, but are useful to understand.
It seems that depend from the Image Content Block. When the inserted image has a dimension in width greater than the display device (smartphone, tablets, etc.) where I'm visualizing the received email, the auto-fit function of Gmail "crashes". This is why it is happening also on all AcyMailing default templates like "AcyMailing first email", "Snow", "Christmas" etc.
I'm quite sure this is due to the "max-width: 100%" attribute that is added by default each time an image is loaded (while for height is loaded "ḧeight: auto").
(This attribute has no big sense because we are working in a "Foundation for Emails" container where the $global-width is fixed around the 600 pixels.)

Please, Can you replicate and confirm it ?
Please, Do you have any idea about a fix / workaround for it ? Maybe a solution could be to do not write / to change the "max-width: 100%" attribute ?!?