title: CSS Grids not working on actual mobile devices despite displaying perfectly on all screen sizes during testing
body: <p>I am new to CSS Grids (and web development in general) and have recently started using CSS Grids, which I find great except for one big problem: none of it seems to work on any mobile devices despite:</p>
  
  <ol>
  <li>having tried various mobile browsers including Firefox, Chrome, Samsung browser, Safari, UC browser and Baidu browser</li>
  <li>updating all browsers to latest versions</li>
  <li>testing display at all screen sizes by manually reducing size of browser in Firefox and Chrome on PC (displays perfectly at all sizes when testing in this way!)</li>
  <li>testing mobile version using Firefox's built-in mobile screen test feature (also displays perfectly when testing in this way!)</li>
  <li>tried testing on various mobile device models at <a href="http://responsivedesignchecker.com/" rel="nofollow noreferrer">http://responsivedesignchecker.com/</a> (all display almost exactly as intended!).</li>
  </ol>
  
  <p>Here is the HTML (please forgive any obvious errors as I am a novice)</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Grid&lt;/title&gt;
  &lt;meta charset="UTF8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="grid"&gt;
  
  &lt;menu&gt;
  &lt;div&gt;Home&lt;/div&gt;
  &lt;div&gt;News&lt;/div&gt;
  &lt;div&gt;Whitepaper&lt;/div&gt;
  &lt;div&gt;About&lt;/div&gt;
  &lt;/menu&gt;
  
  &lt;!--HEADER--&gt;
  &lt;header&gt;
  &lt;h1 class="site-title"&gt;Silubium&lt;/h1&gt;&lt;br&gt;
  &lt;span class="motto"&gt;The currency of the future&lt;/span&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;div class="buttons"&gt;
  &lt;img src="images/buttonAndroid.png"&gt;
  &lt;img src="images/buttonIOS.png"&gt;
  &lt;img src="images/buttonWindows.png"&gt;
  &lt;img src="images/buttonLinux.png"&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;!--CONTENT--&gt;
  &lt;intro&gt;
  &lt;div class="introText"&gt;
  &lt;h1 class="contentHeader"&gt;Silubium: a currency built for the future&lt;/h1&gt;
  &lt;p&gt;Silubium is the world's first 4th-generation cryptocurrency and has been designed from the outset to be a consumer currency. Silubium enjoys the advantages of high-level government support for the "one road, one belt" economic development strategy of China and is already being actively implemented by several large enterprises Hong Kong, Macao and elsewhere.
  &lt;a href="#"&gt;Read More&lt;a&gt;.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="iframe"&gt;&lt;iframe src="iframe.html" height="200" width="400"&gt;&lt;/iframe&gt;&lt;/div&gt;
  
  
  &lt;/intro&gt;
  
  &lt;whySilubium&gt;
  &lt;h1&gt;Why Silubium?&lt;/h1&gt;
  &lt;div class="icons"&gt;
  &lt;div class="icon"&gt;&lt;img src="images/icon_1.png"&gt;&lt;p class="iconCaption"&gt;Designed for the consumer&lt;/p&gt;&lt;/div&gt;
  &lt;div class="icon"&gt;&lt;img src="images/icon_2.png"&gt;&lt;p class="iconCaption"&gt;Cutting-edge 4th-generation&lt;br&gt; public ledger&lt;/p&gt;&lt;/div&gt;
  &lt;div class="icon"&gt;&lt;img src="images/icon_3.png"&gt;&lt;p class="iconCaption"&gt;Unmatched security features&lt;/p&gt;&lt;/div&gt;
  &lt;div class="icon"&gt;&lt;img src="images/icon_4.png"&gt;&lt;p class="iconCaption"&gt;24/7/365 support&lt;/p&gt;&lt;/div&gt;
  &lt;div class="icon"&gt;&lt;img src="images/icon_5.png"&gt;&lt;p class="iconCaption"&gt;Designed for stability&lt;/p&gt;&lt;/div&gt;
  &lt;div class="icon"&gt;&lt;img src="images/icon_6.png"&gt;&lt;p class="iconCaption"&gt;Globally accepted&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/whySilubium&gt;
  
  &lt;!--FOOTER--&gt;
  &lt;footer&gt;
  &lt;div class="contact"&gt;
  &lt;div class="footerTitle"&gt;Contact Ryker Freegeld&lt;/div&gt;
  &lt;div class="footerItem"&gt;Email: rygeld@silubium.com&lt;/div&gt; 
  &lt;div class="footerItem"&gt;Twitter: @Silubium&lt;/div&gt;
  &lt;div class="footerItem"&gt;Youtube: "Silubium" (channel)&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="links"&gt;
  &lt;div class="footerTitle"&gt;Related Links&lt;/div&gt;
  &lt;div class="footerItem"&gt;&lt;a href="djw.top"&gt;Silktrader Trading platform&lt;/a&gt;&lt;/div&gt;
  &lt;div class="footerItem"&gt;&lt;a href="www.silubium.org"&gt;www.silubium.org&lt;/a&gt; (Chinese promotional site)&lt;/div&gt;
  &lt;/div&gt;
  &lt;/footer&gt;
  
  &lt;!--COPYRIGHT--&gt;
  &lt;div class="copyright"&gt;
  &lt;div class="copyrightText"&gt;Design and coding by &lt;a style="color:white" href="#"&gt;Ryker Freegeld&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the CSS using CSS Grids code:</p>
  
  <pre><code>/*
  THEME: SILUBIUM GRID
  AUTHOR: DON HARTIG
  VERSION: 1.0
  */
  
  body {background-color:#404040;
      font-family:arial;}
  
  menu {height:20px;
  display:grid;
  grid-template-columns:70% 1fr 1fr 1fr 1fr;
  justify-items:end;
  }
  
  /*HEADER*/  
  header {
      display:grid;
      grid-area:header;
      grid-template-columns:1fr;
      grid-template-rows:auto;
      justify-items:center;
      color: white;
      background-color:#404040;
      background-image:url("images/blueSGbackground.png");
      width:100%;
      height: 720px;
      padding-top:30px;
      padding-bottom:100px;}
  .site-title {padding-top:150px; font-size:50px;}
  .motto {    font-size:20px;}     
  .buttons {
      text-align:center;
      }
  
  /*CONTENT*/
  .contentHeader {
      color:white;
      display:grid;
      justify-items:left;
      font-size:40px;
      }
  intro {
      display:grid;
      grid-area:content;
      color:white;
      background-color:#404040;
      grid-template-columns:1fr;
      grid-template-rows:2fr;
      justify-items:;
      padding-bottom:0px;
      }
  whySilubium {display:grid;
      grid-template-columns:1fr;
      justify-items:center;
      color:white;
      padding-top:30px;}
  .icons {display:grid;
      grid-template-columns:1fr;
      justify-items:center;
      }
  .iconCaption {text-align:center; margin-top:0px;}
  .icon &gt; img {padding:40px 40px 5px 40px;}   
  .iframe {display:grid;
      justify-items:center;}
  
  /*FOOTER*/
  footer {
      display:grid;
      grid-template-columns:1fr;
      grid-template-rows:auto;
      grid-area:footer;
      background-color:black;
      color:white;
      justify-items:center;
      font-size:14px;
      padding:30px;
      }
  .footerTitle {display:grid;
      font-size:30px;
      text-decoration:underline;
      padding-bottom:20px;}
  .footerItems {}
  
  .grid {
      grid-template-areas:
      ". header ."
      "h1"
      "content"
      "footer footer footer"
      }
  
  /*COPYRIGHT*/
  .copyright {
      height:50px;
      background-color:blue;}
  .copyrightText {display:grid;
      justify-items:center;
      color:lime;
      padding-top:6px;}
  
  /*RESPONSIVE*/
  @media only screen and (min-width: 500px) {
      header {padding-bottom:;}}  
      footer {grid-template-columns:1fr 1fr;}
  
  @media only screen and (min-width: 700px) {
      intro {grid-template-columns:1fr 1fr;}
      .icons {grid-template-columns:1fr 1fr;}}
  
  @media only screen and (min-width: 1000px) {
      .icons {grid-template-columns:1fr 1fr 1fr;
              grid-column-gap:200px;}}
  
  @media only screen and (min-width: 1200px) {
      intro {padding-left:40px;}
      .icons {grid-column-gap:300px;}}
  
  @media only screen and (min-width: 1500px) {
      header {padding-top:70px;}
      .site-title {padding-top:50px;}
      .motto {padding-top:0px; padding-bottom:0px;}}
  </code></pre>
  
  <p>Any help would be greatly appreciated as I am struggling to get this working under a deadline.</p>
  
  <p>Thanks.</p>