title: Where did all the text go on mobile site? Elements not appearing on iPhone.
body: <p>I have created a website for my dad as a favour for putting me through design school. After uploading it to the network hosting site that my dad uses I discovered that when opening the site on my iPhone, all the text (or most of it) completely disappears. I am not sure what is doing this because when I test the site through Chrome Developer Tools, JsFiddle, etc it appears to be fine. The site is pretty simple so I am using Flexbox for the layout. Let me know if you need any other details. </p>
  
  <p>I am not sure what is going on and would very much appreciate it if someone could take a poke around and point me in the right direction. I am providing a JsFiddle that includes the homepage html and the relevant CSS as well as posting it here. Thanks. </p>
  
  <p><a href="https://jsfiddle.net/ericvnwk/vfnejmw7/2/" rel="nofollow noreferrer">https://jsfiddle.net/ericvnwk/vfnejmw7/2/</a></p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;title&gt;
    Fairfield Tree Nurseries Inc.&lt;/title&gt;
  &lt;script src="https://use.typekit.net/hlp7xgg.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    try {
      Typekit.load({
        async: true
      });
    } catch (e) {}
  
  &lt;/script&gt;
  
  &lt;body&gt;
    &lt;div class="header"&gt;
      &lt;img class="logo" src="https://s1.postimg.org/1ic483yqhr/logo.png" alt="Fairfield Tree Nurseries Inc." width="80px" height="80px"&gt;
      &lt;div class="title"&gt;&lt;a href="index.html"&gt; Fairfield Tree Nurseries Inc. &lt;/a&gt;
  &lt;/div&gt;
      &lt;nav class="navbar navtop"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="products.html"&gt;Products&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="shipping.html"&gt;Shipping&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="location.html"&gt;Location&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  
    &lt;div class="header-border"&gt;
    &lt;/div&gt;
  
    &lt;div class="main"&gt;
  
      &lt;div class="fw-content fw-top"&gt;
        &lt;div class="fw-image"&gt;
          &lt;img src="https://s1.postimg.org/1ic4840vnj/welcome.jpg" alt="Welcome to Fairfield Tree Nurseries"&gt;
        &lt;/div&gt;
        &lt;div class="cntr-type"&gt;
          &lt;h2&gt; Welcome to &lt;/h2&gt;
          &lt;h1&gt; Fairfield Tree Nurseries &lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="arrow"&gt;
        &lt;div class="down-arrow"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="fw-content below"&gt;
        &lt;div class="fw-image"&gt;
          &lt;img src="https://s1.postimg.org/1lvq5tqycf/about-home.jpg" alt="Welcome to Fairfield Tree Nurseries"&gt;
        &lt;/div&gt;
        &lt;div class="cntr-type"&gt;
          &lt;h4 id="green"&gt; We are a wholesale tree nursery producing field &lt;br&gt; grown nursery stock in the Lower Fraser Valley &lt;br&gt; community of Chilliwack, British Columbia. &lt;/h4&gt;
          &lt;div class="btn" id="green-btn"&gt;
            &lt;a href="about.html"&gt;
              &lt;h3&gt;Learn More&lt;/h3&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="fw-content"&gt;
        &lt;div class="fw-image"&gt;
          &lt;img src="https://s1.postimg.org/51y1xx3dpr/field-wide.jpg" alt="Field wide angle"&gt;
        &lt;/div&gt;
        &lt;div class="cntr-type up"&gt;
          &lt;h4 class="shadow" id="white"&gt; We offer an expanded product line to include a wide &lt;br&gt; range of field grown grafted conifers, specialty broadleaf &lt;br&gt; evergreen/deciduous shrubs and specimen plant material. &lt;/h4&gt;
          &lt;div class="btn btn-shadow" id="white-btn"&gt;
            &lt;a href="products.html"&gt;
              &lt;h3 class=""&gt;Discover More&lt;/h3&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="hw-content hide"&gt;
        &lt;div class="hw-left"&gt;
          &lt;div class="cntr-type cntr-type-special"&gt;
            &lt;h4 id="white"&gt; Our products can be found throughout &lt;br&gt; North America and we pride ourselves in &lt;br&gt; providing expert service and support to all &lt;br&gt; of our clients, wherever they are. &lt;/h4&gt;
            &lt;div class="btn" id="white-btn"&gt;
              &lt;a href="shipping.html"&gt;
                &lt;h3&gt;Shipping Info&lt;/h3&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="hw-right"&gt;
          &lt;img src="https://s1.postimg.org/2lbtizus33/leaves-sky-wide.jpg"&gt;
          &lt;div class="cntr-type cntr-type-special"&gt;
            &lt;h4 id="green"&gt; We are located in the Lower &lt;br&gt; Fraser Valley community of Chilliwack, &lt;br&gt; British Columbia, Canada. &lt;/h4&gt;
            &lt;div class="btn" id="green-btn"&gt;
              &lt;a href="location.html"&gt;
                &lt;h3&gt;View Map&lt;/h3&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="fw-content hidden-content empty bkg-green"&gt;
        &lt;div class="cntr-type"&gt;
          &lt;h4 id="white"&gt; Our products can be found throughout &lt;br&gt; North America and we pride ourselves in &lt;br&gt; providing expert service and support to all &lt;br&gt; of our clients, wherever they are. &lt;/h4&gt;
          &lt;div class="btn" id="white-btn"&gt;
            &lt;a href="shipping.html"&gt;
              &lt;h3&gt;Shipping Info&lt;/h3&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="fw-content hidden-content"&gt;
        &lt;div class="fw-image"&gt;
          &lt;img src="https://s1.postimg.org/2lbtizus33/leaves-sky-wide.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="cntr-type"&gt;
          &lt;h4 id="green"&gt; We are located in the Lower &lt;br&gt; Fraser Valley community of Chilliwack, &lt;br&gt; British Columbia, Canada. &lt;/h4&gt;
          &lt;div class="btn" id="green-btn"&gt;
            &lt;a href="location.html"&gt;
              &lt;h3&gt;View Map&lt;/h3&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="fw-content empty"&gt;
        &lt;div class="cntr-type"&gt;
          &lt;h4 id="green"&gt; For more information or to place an order please contact us, &lt;br&gt; we would love to hear from you. &lt;/h4&gt;
          &lt;div class="btn" id="green-btn"&gt;
            &lt;a href="contact.html"&gt;
              &lt;h3&gt;Contact Us&lt;/h3&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div class="footer"&gt;
      &lt;div class="footer-main"&gt;
        &lt;img src="https://s1.postimg.org/8ax5ukoq6n/logo-white.png"&gt;
        &lt;!--&lt;div class="logo-footer"&gt;
            &lt;/div&gt; --&gt;
        &lt;div class="title" style="color: white;"&gt;&lt;a href="index.html"&gt; Fairfield Tree Nurseries &lt;/a&gt;&lt;/div&gt;
        &lt;nav class="navbar navfoot"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="products.html"&gt;Products&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="shipping.html"&gt;Shipping&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="location.html"&gt;Location&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="copyright"&gt;
      &lt;p&gt; &amp;copy; 2017 Fairfield Tree Nurseries Inc. All rights reserved.
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>   body {
    margin: 0 auto;
    font-family: "proxima-nova-alt", sans-serif;
    text-align: center;
    position: relative;
    color: #707070;
  }
  
  
  /*================ NAV &amp; HEADER STYLES + FOOTER ==================*/
  
  .header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    top: 0;
    height: 120px;
    padding: 15px 40px 15px 40px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .header-border {
    background-color: #009948;
    height: 2px;
    width: 100%;
  }
  
  .title {
    font-size: 24px;
    font-weight: 300;
    color: #009948;
    padding-left: 20px;
    text-align: left;
  }
  
  .navbar {
    margin-left: auto;
  }
  
  .navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .navbar li {
    display: inline-block;
    font-weight: 400;
    font-size: 16px;
    padding-left: 4vw;
  }
  
  .navbar a {
    text-decoration: none;
    color: #969696;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: .3s color;
  }
  
  .navbar a:hover {
    color: #009948;
  }
  
  .footer {
    width: 100%;
    max-width: 1200px;
    background-color: #333;
  }
  
  .footer-main {
    height: 200px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 80px 0px 80px;
    margin: 0 auto;
  }
  
  .footer h6 a {
    transition: .3s color;
  }
  
  .footer h6 a:hover {
    color: #009948;
  }
  
  .copyright {
    height: 80px;
    padding: 20px;
    color: #505050;
    background-color: rgba(10, 10, 10, .5);
    padding: 40px 80px 10px 80px;
  }
  
  .copyright p {
    text-align: left;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 400;
    max-width: 1500px;
    margin: 0 auto;
  }
  
  .navfoot a {
    color: #707070;
    transition: .3s color;
  }
  
  .navfoot a:hover {
    color: white;
  }
  
  
  /*================ PAGES STYLES ===================*/
  
  .main {
    max-width: 1500px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  
  /*=============== Home PAGE ================*/
  
  .fw-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 600px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
  }
  
  .fw-top {
    border-top: 2px solid white;
  }
  
  .below {
    margin-top: -30px;
    position: relative;
    z-index: 1;
  }
  
  .fw-image img {
    max-height: 600px;
  }
  
  .hw-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 600px;
    position: relative;
    background-color: #009948;
    max-width: 1500px;
    margin: 0 auto;
    margin-top: -2px;
  }
  
  .hw-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
  }
  
  .hw-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 50%;
    margin-left: auto;
  }
  
  .hw-right img {
    height: 600px;
  }
  
  .cntr-type {
    position: absolute;
    left: auto;
  }
  
  .up {
    margin-top: -60px;
  }
  
  .arrow {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  
  .down-arrow {
    margin: -2px;
    width: 0;
    height: 0;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
    border-top: 30px solid #009948;
  }
  
  
  /*================ TEXT STYLES ===================*/
  
  h1 {
    font-size: 60px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
  }
  
  h2 {
    margin: 0;
    font-size: 36px;
    font-weight: 100;
    letter-spacing: 2px;
    color: white;
    text-transform: uppercase;
  }
  
  h3 {
    font-size: 12px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
  }
  
  h4 {
    font-size: 24px;
    line-height: 36px;
    font-weight: 300;
    letter-spacing: 0.1px;
  }
  
  h5 {
    text-align: left;
    font-size: 24px;
    font-weight: 400;
    color: #009948;
    margin: 10px 0 0 0;
    letter-spacing: 1px;
  }
  
  h6 {
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    margin: 20px 0 0 0;
  }
  
  p {
    font-size: 20px;
    line-height: 28px;
    font-weight: 300;
    letter-spacing: 0.1px;
    text-align: left;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  .currentlink a {
    color: #009948;
  }
  
  #green {
    color: #009948;
  }
  
  #grey {
    color: #2f2f2f;
  }
  
  #white {
    color: #fff;
  }
  
  .shadow {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  }
  
  
  /*================ BUTTON STYLES ====================*/
  
  .btn {
    width: 150px;
    height: 30px;
    margin: auto;
    border: 2px solid;
    border-radius: 20px;
    line-height: 30px;
  }
  
  .btn a {
    text-decoration: none;
  }
  
  #green-btn {
    background-color: rgba(0, 153, 72, 0);
    border-color: #009948;
    color: #009948;
    transition: .5s background-color, color;
    margin-bottom: 15px;
  }
  
  #white-btn {
    background-color: rgba(255, 255, 255, 0);
    border-color: #fff;
    color: #fff;
    transition: .5s background-color, color;
  }
  
  #green-btn:hover {
    border-color: #009948;
    background-color: rgba(0, 153, 72, 1);
    color: #fff;
  }
  
  #white-btn:hover {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 1);
    color: #009948;
    text-shadow: none;
  }
  
  .btn-shadow {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  
  /*================================
    RESPONSIVE Styling
    ================================*/
  
  @media screen and (min-width:500px) {
    .hidden-content {
      display: none;
    }
  }
  
  @media screen and (max-width:500px) {
    .header {
      flex-direction: column;
      height: inherit;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 0;
    }
    .title {
      text-align: center;
      width: 100%;
      padding: 0;
      margin-top: 10px;
    }
    .navbar {
      margin: 15px 0 0 0;
      width: 100%;
      padding: 0;
    }
    .navbar ul {
      display: flex;
      flex-direction: column;
    }
    .navbar li {
      font-weight: 400;
      padding: 7.5px 0 7.5px 0;
      border-top: 2px solid #009948;
      width: 100%;
    }
    .navbar a {
      text-decoration: none;
      width: inherit;
      margin: 100px;
    }
    .navbar a:active {
      background-color: white;
      color: #009948;
    }
    .navtop {
      padding: 10px 0 0 0;
    }
    .main {
      overflow: hidden;
    }
    .arrow {
      margin-top: -4px;
    }
    .cntr-type {
      padding: 0 5%;
    }
    .up {
      margin-top: 0px;
    }
    .btn {
      width: 120px;
      height: 30px;
      margin: auto;
      border: 2px solid;
      border-radius: 20px;
      line-height: 30px;
    }
    .btn-shadow {
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
      box-shadow: inset 2px 2px 40px rgba(255, 255, 255, 0.5);
    }
    .hide {
      display: none;
    }
    .hidden-content {
      display: flex;
    }
    .footer {
      flex-direction: column;
      justify-content: center;
      height: inherit;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 5px;
    }
    .footer-main {
      display: flex;
      flex-direction: column;
      padding: 30px 0 0 0;
      height: inherit;
    }
    .navfoot {
      background-color: #707070;
      padding: 0px;
    }
    .navfoot li {
      border-color: #333;
    }
    .navfoot a {
      color: #333;
    }
    .copyright {
      padding: 20px 0 0 0;
    }
    .copyright p {
      width: 80%;
    }
    .questions {
      padding-top: 0;
    }
    .question-box {
      margin-top: 30px;
    }
    /*==============FONT STYLES==============*/
    h1 {
      font-size: 36px;
    }
    h2 {
      font-size: 24px;
    }
    h3 {
      font-size: 10px;
      font-weight: 400;
    }
    h4 {
      font-size: 16px;
      line-height: 24px;
    }
    br {
      display: none;
    }
    p {
      font-size: 18px;
    }
  }
  
  @media screen and (max-width:1024px) and (min-width:500px) {
    .header {
      flex-direction: column;
      padding: 20px 0 0 0;
      height: inherit;
    }
    .navbar {
      margin: 0;
    }
    .navtop {
      padding: 10px 0 0 0;
    }
    .title {
      margin: 10px 0 10px 0;
    }
  }
  
  @media screen and (max-width:1024px) {
    .fw-content {
      height: inherit;
      overflow: hidden;
    }
    .fw-image {
      height: inherit;
    }
    .fw-image img {
      width: auto;
      height: 45vh;
      display: flex;
      justify-content: space-between;
    }
    .fw-top {
      border: none;
    }
    .cntr-type {
      padding: 0 10%;
    }
    .cntr-type-special {
      padding: 0;
      width: 300px;
    }
    .cntr-type-special h4 {
      font-size: 20px;
      line-height: 32px;
    }
    .empty {
      height: 60vh;
    }
    .empty-s {
      height: 40vh;
    }
    h4 br {
      display: none;
    }
    .question-mark {
      margin-top: -30px;
    }
  }
  
  @media screen and (min-width: 501px) {
    .navtop {
      padding: 10px 0 10px 0;
    }
  }
  
  @media screen and (max-width: 700px) {
    .bkg-green {
      background-color: #009948;
    }
    .hw-contact .contact-info {
      display: none;
    }
    .contact-info {
      width: 75%;
    }
    .fw-contact {
      padding: 15px 0 25px 0;
    }
    .contact-form {
      width: 100%;
    }
    .contact-form form {
      width: 90%;
    }
  }
  
  @media screen and (min-width:700px) {
    .hidden-content2 {
      display: none;
    }
  }
  
  @media screen and (min-width:1240px) {
    .header {
      max-width: none;
    }
    .footer {
      max-width: none;
    }
  }
  
  @media screen and (min-width:1580px) {
    .header {
      padding: 15px 0 15px 0;
      max-width: 1500px;
    }
    .footer-main {
      max-width: 1500px;
    }
    .copyright {}
  }
  </code></pre>