title: Image not showing iPhone (Ok on all devices including Android)
body: <p>I looked through multiple posts on this but it doesn't seem applicable to my case. I've 2 background images that are not displaying on iPhone (only), it works fine for desktop and android</p>
  
  <p>I have added this to index.html</p>
  
  <pre><code>meta name="viewport" content="width=device-width, initial-scale=1.0"
  </code></pre>
  
  <p>In CSS they are both slightly coded differently, <strong>image1</strong></p>
  
  <pre><code>.jumbotron {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
    background-size: cover;
    background-position: center 15%;
    height: 100vh;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 1px;
    margin-bottom: 0rem;
  }
  </code></pre>
  
  <p>And <strong>image2</strong></p>
  
  <pre><code>.testimonials {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)), url(img/testimonials.jpg);
    background-size: cover;
    background-position: right;
    color: #fff;
    background-attachment: fixed;
    margin: 0px;
  }
  </code></pre>
  
  <p>In terms of responsive sizing, I'll only adjusted for jumbotron's other elements (eg h1, button) but nothing specific for testimonials</p>
  
  <p>Can anyone shed some light please? Thank you!</p>