title: Resposive deployed website display works in chrome dev tools and Firefox but not in chrome on actual mobile devices?
body: <p>I recently deployed a website after testing for responsiveness in chrome developer tools that displays correctly in chrome developer tools and on  mobile in Firefox but not chrome.
  Here's what it looks like in the developer tools.
  <img src="https://res.cloudinary.com/hkunzler/image/upload/v1555907798/Screenshot_from_2019-04-20_16-06-06_z53fxn.png" alt="website in chrome developer tools"></p>
  
  <p>Here's what it looks like on chrome on a mobile device.</p>
  
  <p><img src="https://res.cloudinary.com/hkunzler/image/upload/v1555908014/2019-04-21_dhbtid.jpg" alt="website in chrome on mobile">
  You can see that the background image is gone and the header image is off to the left.</p>
  
  <p>I thought it might be because of an older version of chrome so I managed to get a look at it on a newer version of chrome.</p>
  
  <p><img src="https://res.cloudinary.com/hkunzler/image/upload/v1555908014/57536401_316679345638256_190879242966269952_n_upakj0.jpg" alt="website in newer chrome on mobile">
  So on this newer one the picture is no longer to the left but the background is still missing.</p>
  
  <p>So it works when I'm viewing the website on a desktop and reduce the size to mobile and on Firefox but breaks in chrome on mobile.</p>
  
  <p>I've tried different versions of chrome, uninstalling and reinstalling chrome, using both the chrome and firefox developer tools and I've also tried finding similar questions already answered on Stack Overflow and the most similar says to make sure to have 
  <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;</code>
  which I have and I even saw a post saying to add <code>maximum-scale=1</code> which I tried. </p>
  
  <p>Since it works fine in the developer tools I've been flying blind trying things and redeploying.</p>