I'm currently in the process of creating an html email for different clients, and experiencing some unusual issues with gmail (yay) - particularly when viewing an email through a web browser. (No problems in the app)
The issue mainly arises when using a small screen browser (e.g. mobile) - all images appear too wide despite having a max-width set, causing the layout to stretch and require horizontal scrolling. Although it poses no problems on desktop, the same issue persists within the code.
I have incorporated the following inline style on my images:
style="max-width:100% !important;"
In addition, I have included a <style>
block in the header with:
img {max-width: 100% !important;}
Upon inspecting the image element (both on my phone and pc), there is no sign of the max-width from the head, which was somewhat expected.
However, what's perplexing is that each image still retains an inline max-width attribute, but now in pixels instead of percentage.
When inspected on a pc browser, the inline max-width now displays:
max-width: 1920px;
On my phone (android), the inline max-width appears as:
max-width: 767px;
In this scenario, the images become excessively wide, disrupting the layout. This occurs with all images, regardless of their actual dimensions.
I do not see any indications of the email being adjusted for my screen or any options to toggle this feature on or off.
Has anyone encountered this issue before? Any suggestions on how to prevent gmail from interfering with the max-width attribute, or getting it to adhere to the max-width specified in the header? (I refrained from using classes or ids to apply styles from the header as Google usually strips them out)
To add to the peculiarity (or perhaps I'm going crazy...), I am positive this was functioning properly yesterday...
UPDATE: I believe I've uncovered why it appeared to work yesterday - it didn't - modifications made in dev tools were not clearing upon reloading, so the test max-width I added (imitating the one in the header) remained intact...
After some further tweaking, adding width: 100% !important;
inline on all wide images seems to rectify the issue - gmail does not alter the value. However, it would be intriguing to understand why it modifies the max-width value, if anyone has any insights!