title: CSS breaks on reload mobile
body: <p>I'm not very skilled at CSS. I have website that has 4 stylesheets and 3 JS files-using Bootstrap 4 and jQuery. When I deployed it on live and refresh the page, all was working fine.</p>
  
  <p>However, when I go to website from mobile, it works fine the first time but when I refresh, all the CSS and HTML is broken (this usually happens after 1st or 2nd refresh). After it is broken, I refresh it once or twice, it fixes the issue. I searched about it and some say it is happening because of using relative positioning and floating, but when I commented out those lines from my CSS files, I still have the same problem. Does anyone have any idea about how to fix this issue? </p>
  
  <p>index html</p>
  
  <p>**</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Landor App&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta http-equiv='cache-control' content='no-cache'&gt;
  &lt;meta http-equiv='expires' content='0'&gt;
  &lt;meta http-equiv='pragma' content='no-cache'&gt;
  &lt;style&gt;&lt;/style&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" type="text/css"/&gt;
      &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous" type="text/css"/&gt;
      &lt;link rel="stylesheet" href="Stylesheets/fonts.css" type="text/css"/&gt;
      &lt;link rel="stylesheet" href="Stylesheets/intro.css" type="text/css"/&gt;
      &lt;link rel="stylesheet" href="Stylesheets/home.css" type="text/css"/&gt;  
      &lt;link rel="stylesheet" href="Stylesheets/video.css" type="text/css"/&gt;
      &lt;link rel="stylesheet" href="Stylesheets/modals.css" type="text/css"/&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!--INTRO PAGE--&gt;
  &lt;div id="intro-page" class="container-fluid" style="display: none"&gt;
      &lt;div class="row intro-header"&gt;
          &lt;div class="col-12"&gt;&lt;img id="landor-worldmark"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row intro-text"&gt;
              &lt;div class="intro-text col-12"&gt;
                  &lt;h3&gt;Hi Andrew,&lt;/h3&gt;&lt;br&gt;
                  &lt;h3&gt;We can't wait to welcome you to Landor London.
                   Until then please take a few minutes
                   &lt;span style="white-space: nowrap;"&gt;(3, to be exact)to explore more about us...&lt;/span&gt;&lt;/h3&gt;&lt;br&gt;
                  &lt;h3&gt;Regards,&lt;/h3&gt;
                  &lt;h3&gt;Peter&lt;/h3&gt;&lt;br&gt;&lt;br&gt;
                  &lt;span id="enter-button"&gt;Enter&lt;/span&gt;        
              &lt;/div&gt;          
      &lt;/div&gt; 
      &lt;div class="intro-footer row"&gt;
              &lt;div class="col-12"&gt;&lt;img class="img-fluid intro-boat"&gt;&lt;/img&gt;&lt;/div&gt;
      &lt;/div&gt;      
  &lt;/div&gt;
  intro.css
  html {
    height: 100%;
  }
  .intro-text{
     font-family: "apercuBold"; 
  }
  #intro-page{
    padding-left: 20px;
    padding-right: 20px;
  }
  body {
    background-color:black;
  }
  .container-fluid{
    padding-right: 10px;
    padding-left: 10px;
  }
  .intro-text{
    position: relative;
    top: 5%;
  }
  #enter-button{
    font-family: "timeposRegular"; 
    text-decoration: underline;
    font-size: 150%;
    cursor: pointer;
    position: relative;
    top: 20%;
  }
  .intro-header{
    padding-top: 3%;
  }
  .intro-text{
      padding-top: 50px;
      padding-bottom: 50px;
  }
  #landor-worldmark{
    content:url("../assets/Landor_Logo.png");
    width: 120px;
    height: 30px;
  }
  .intro-boat{
    content:url("../assets/boat2.png");
    max-width: 400px;
    height: auto;
    float:right;
  }
  @media screen and (max-width: 450px) {
    .intro-text &gt; h3{
       font-size: 100%;
    }
    .intro-text{
        font-size: 100%;
        line-height: 1.4;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    #enter-button{
       font-size: 100%;
    }
    .intro-boat{
      max-width: 200px;
      height: auto;
      float:right;
    }
    .intro-header{
      padding-top: 5%;
    }
  }
  @media screen and (max-width: 350px) {
    .intro-text &gt; h4{
       font-size: 90%;
    }
    .intro-text{
        font-size: 94%;
        line-height: 1.1;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    #enter-button{
       font-size: 94%;
    }
    .intro-boat{
      max-width: 200px;
      height: auto;
  
    }
    .intro-header{
      padding-top: 5%;
    }
  }
  .intro-footer{
    position: fixed;
    bottom: 10%;
    width: 100%;
  }
  </code></pre>
  
  <p>**</p>