title: Gmail changing max-width in % to px?
body: <p>I'm currently working on a html email for various clients, and having some strange issues using gmail (yay) - specifically, when viewing an email through the browser.  (No issues in the app)</p>
  
  <p>The issue only really comes about when using the browser on a small screen (eg mobile) - all the images are displaying too wide, despite a max-width, meaning the layout is stretched and requires horizontal scrolling.  Whilst it causes no issues on desktop, the same thing happens to the code</p>
  
  <p>On my images, I've set  </p>
  
  <pre><code>style="max-width:100% !important;"
  </code></pre>
  
  <p>inline on each image.  I also have a <code>&lt;style&gt;</code> block in the head with</p>
  
  <pre><code>img {max-width: 100% !important;}
  </code></pre>
  
  <p>When inspecting the image element (both on my phone and pc), I'm seeing no sign of the max-width from the head, which is not totally unexpected.  </p>
  
  <p>What's weird is that each image still has a max-width set inline- BUT it is no longer in %, but in px.  </p>
  
  <p>Inspected in the pc browser, the inline max-width now says</p>
  
  <pre><code>    max-width: 1920px;
  </code></pre>
  
  <p>Viewed on my phone (android, inline max-width is</p>
  
  <pre><code>    max-width: 767px;
  </code></pre>
  
  <p>In this case, the image is now WAY too wide and is breaking the layout.  The same thing happens on all images, regardless of their actual size.  </p>
  
  <p>I'm not seeing any message telling me that the email has been adapted for my screen, or any option to turn this on or off.  </p>
  
  <p>Has anyone had this happen before? Any ideas on how to prevent gmail messing with the max-width, or getting it to respect the max-width in the head?  (I've avoided using classes or id's to attach styles from the head as as far as I know, google strips these out)</p>
  
  <p>Even weirder (or maybe I'm losing it...)  I'm SURE this was working yesterday...</p>
  
  <p>UPDATE: think I've solved why it was apparently working yesterday - it wasn't - changes I'd made in dev tools weren't clearing when I reloaded, so the max-width I'd added in as a test (replicating a max-width in the head) was still there... </p>
  
  <p>After a bit more playing, adding <code>width: 100% !important;</code> inline on all wide images seems to work as a fix - gmail doesn't mess with the value.   Would still be interesting to know why it changes the value of the max-width though, if anyone has any clues!</p>