css - Gmail changing max-width in % to px? -

i'm working on html email various clients, , having strange issues using gmail (yay) - specifically, when viewing email through browser. (no issues in app)

the issue comes when using browser on small screen (eg mobile) - images displaying wide, despite max-width, meaning layout stretched , requires horizontal scrolling. whilst causes no issues on desktop, same thing happens code

on images, i've set

style="max-width:100% !important;" 

inline on each image. have <style> block in head with

img {max-width: 100% !important;} 

when inspecting image element (both on phone , pc), i'm seeing no sign of max-width head, not totally unexpected.

what's weird each image still has max-width set inline- no longer in %, in px.

inspected in pc browser, inline max-width says

    max-width: 1920px; 

viewed on phone (android, inline max-width is

    max-width: 767px; 

in case, image way wide , breaking layout. same thing happens on images, regardless of actual size.

i'm not seeing message telling me email has been adapted screen, or option turn on or off.

has had happen before? ideas on how prevent gmail messing max-width, or getting respect max-width in head? (i've avoided using classes or id's attach styles head as far know, google strips these out)

even weirder (or maybe i'm losing it...) i'm sure working yesterday...

update: think i've solved why apparently working yesterday - wasn't - changes i'd made in dev tools weren't clearing when reloaded, max-width i'd added in test (replicating max-width in head) still there...

after bit more playing, adding width: 100% !important; inline on wide images seems work fix - gmail doesn't mess value. still interesting know why changes value of max-width though, if has clues!

gmail notorious misusing maxwidths set layouts.

try , avoid setting max-width percentage value elements aren't high level containers. run weird rendering on things gmail app well. typically gmail app converts widths max-widths can crunch content still maintain structure @ higher screen resolutions.

gmail webapp similar. restricts widths can set element can't add things wider display, @ gmail web app displaying @ 100%.

gmail mobile app - forces content 320px/480px wide box

gmail desktop app - forces content never exceed screen res

gmail desktop treats styles in head quite strange anyway, ignores classes/id's (don't listen people strips them completely) if use other tags identifiers other #id , .class apply styles. e.g.

 * [lang~="identifier"] 

lang pretty tag can use wont in way of tags being used, i.e. alt, title , href.

just careful, if using media queries or starts "@" in style tag gmail may potentially (depends on how feeling day) remove style tag. can avoid adding styles in style tag in body though.

in conclusion. don't rely on max-width control layout inside out, set pixel values limit width="100%".

hope helps