title: CSS grid not displaying correctly on actual mobile browsers (all displays correctly when testing mobile screens on desktop though )
body: <p>CSS grid is not displaying correctly on actual mobile browsers (all displays correctly when testing mobile screens on desktop though).</p>
  
  <p>If I open the app on a desktop's browser and use the browser's testing of different mobile screen sizes and types, I see that the styling works.
  <a href="https://i.stack.imgur.com/Y9fP4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y9fP4.png" alt="enter image description here"></a></p>
  
  <p>However, if I click the link using my (actual) mobile phone's browser I see that the styling does not work. 
  <a href="https://i.stack.imgur.com/OXy19.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OXy19.jpg" alt="enter image description here"></a></p>
  
  <p>i.e. Browser debugging is misleading. This is inconsistent and not how this should work.</p>
  
  <p>Questions:</p>
  
  <ol>
  <li>What am I missing? Why the discrepancy between devTools and the reality on the mobile device?</li>
  <li>What media query could fix this styling on mobile, while still keeping it CSS grid based (nothing I try fixes it)?</li>
  </ol>
  
  <pre><code>    body {
          font-family: 'Helvetica Neue', sans-serif;
               font-weight: 400;
               height: 100%;
               width: 100%;
               margin: 0;
               padding: 0;
               background: #53687e;
               background: linear-gradient(120deg, #53687e, hsl(0, 0%, 18%)) fixed;
      }  
  
         #calculator {
            margin: 0 auto;
            text-align: center;
            padding-top: 100px;
          }
  
          .container {
            position: relative;
            line-height: 1.5;
            display: flex;
            align-items: center;
            justify-content: center;
              padding-bottom: 50px;
          }
  
          .key-group {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-gap: 10px;
            align-items: center;
            justify-content: center;
            background-color: #000;
            padding: 8px;
            border-radius: 8px;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
  
          }
  
  
          .key-pad {
            cursor: pointer;
            background: #33373f;
            color: #ffff;
            border-radius: 8px;
            font-size: 2.5rem;
            border-style: none;
            padding-right: 50px;
            padding-bottom: 50px;
            padding-left: 50px; */
          }
  
          .display {
            grid-column: 1 / span 4;
            grid-row: 1;
            color: #51aaff;
            background: none;
            height: 5rem;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
          }
          .seven {
            grid-column: 1 / span 1;
                  grid-row: 2;
          }
          .eight {
            grid-column: 2 / span 1;
                  grid-row: 2;
          }
          .nine {
            grid-column: 3 / span 1;
                  grid-row: 2;
          }
          .divide {
            grid-column: 4 / span 1;
            grid-row: 2;
            color: #51aaff;
            background-color: #1e242c;
          }
          .four {
            grid-column: 1 / span 1;
            grid-row: 3;
          }
          .five {
            grid-column: 2 / span 1;
            grid-row: 3;
          }
          .six {
            grid-column: 3 / span 1;
            grid-row: 3;
          }
          .multiply {
            grid-column: 4 / span 1;
            grid-row: 3;
            color: #51aaff;
            background-color: #1e242c;
          }
          .one {
            grid-column: 1 / span 1;
            grid-row: 4;
          }
          .two {
            grid-column: 2 / span 1;
            grid-row: 4;
          }
          .three {
            grid-column: 3 / span 1;
            grid-row: 4;
          }
          .subtract {
            grid-column: 4 / span 1;
            grid-row: 4;
            color: #51aaff;
            background-color: #1e242c; 
          }
          .zero {
            grid-column: 1 / span 1;
            grid-row: 5;
          }
          .decimal {
            grid-column: 2 / span 1;
            grid-row: 5;
          }
          .clear {
            grid-column: 3 / span 1;
            grid-row: 5;
            color: #51aaff;
            background-color: #1e242c;
            font-size: 2rem;
            height: 100%;
            width: 100%;  
          }
          .add {
            grid-column: 4 / span 1;
            grid-row: 5;
            color: #51aaff;
            background-color: #1e242c;
          }
          .equals {
            grid-column: 1 / span 4;
            grid-row: 6;
            color: #51aaff;
            background-color: #1e242c;
          }
  
  
          footer {
            position: fixed;
              font-size: small;
            color: #fff;
            background-color: #262626;
              display: flex;
            width: 100vw;
            height: 4rem;
            bottom: 0;
          }
  
          .footer-options {
                  width: 50vw;
                  display: flex;
                  justify-content: flex-start;
              padding-inline-start: 20px;
              align-items: center;
          }
  
  
          footer span {
                  width: 50vw;
                  display: flex;
                  justify-content: flex-end;
                  padding: 0 20px;
              align-items: center;
              }
  
          @media (max-width: 900px)  {
  
              footer {
                          flex-wrap: wrap;
                  height: 5rem;  
              }
  
              .footer-options {
                  width: 100vw;
                  flex-direction: row;
                  justify-content: center;
              padding-inline-start: 0;
              align-items: center;
              }
  
              footer span {
                          width: 100vw;
                          flex-direction: column;
                      text-align: center;
                  align-self: flex-start;
              }
          }
  
  </code></pre>
  
  <p>Relevant React code:</p>
  
  <pre><code>return (        
      &lt;React.Fragment&gt;
          &lt;header&gt;
          {/* &lt;h1&gt;Calculator&lt;/h1&gt; */}
          &lt;/header&gt;
          &lt;div id="calculator"&gt;
    &lt;div className="container"&gt;
              &lt;div className="key-group"&gt;
  
        &lt;div id="display" className="key-pad display"&gt;{display != 0 ? display : 0}&lt;/div&gt;                   
      &lt;button id="seven" className="key-pad seven" onClick={() =&gt; Input(7)}&gt;7&lt;/button&gt;
        &lt;button id="eight" className="key-pad eight" onClick={() =&gt; Input(8)}&gt;8&lt;/button&gt;
        &lt;button id="nine" className="key-pad nine" onClick={() =&gt; Input(9)}&gt;9&lt;/button&gt;
        &lt;button id="divide" className="key-pad divide" onClick={() =&gt; {Operator("/")}}&gt;÷&lt;/button&gt;
        &lt;button id="four" className="key-pad four" onClick={() =&gt; Input(4)}&gt;4&lt;/button&gt;
        &lt;button id="five" className="key-pad five" onClick={() =&gt; Input(5)}&gt;5&lt;/button&gt;
        &lt;button id="six" className="key-pad six" onClick={() =&gt; Input(6)}&gt;6&lt;/button&gt;       
        &lt;button id="multiply" className="key-pad multiply" onClick={() =&gt; {Operator("*")}}&gt;×&lt;/button&gt;              
        &lt;button id="one" className="key-pad one" onClick={() =&gt; Input(1)}&gt;1&lt;/button&gt;
        &lt;button id="two" className="key-pad two" onClick={() =&gt; Input(2)}&gt;2&lt;/button&gt;
        &lt;button id="three" className="key-pad three" onClick={() =&gt; Input(3)}&gt;3&lt;/button&gt;
        &lt;button id="subtract" className="key-pad subtract" onClick={() =&gt; {Operator("-")}}&gt;-&lt;/button&gt;
        &lt;button id="zero" className="key-pad zero" onClick={() =&gt; Zero()}&gt;0&lt;/button&gt;
        &lt;button id="decimal" className="key-pad decimal" onClick={() =&gt; Decimal()}&gt;.&lt;/button&gt;
        &lt;button id="clear" className="key-pad clear" onClick={() =&gt; Clear()}&gt;AC&lt;/button&gt;
        &lt;button id="add" className="key-pad add" onClick={() =&gt; {Operator("+")}}&gt;+&lt;/button&gt;       
        &lt;button id="equals" className="key-pad equals" onClick={()=&gt;Equals()}&gt;=&lt;/button&gt;   
      &lt;/div&gt;      
    &lt;footer&gt;
      &lt;ul className="footer-options"&gt;
    &lt;li className="footer-link"&gt;&lt;a href="#" className="footer-linktext"&gt;Legal&lt;/a&gt;&lt;/li&gt;
    &lt;li className="footer-link"&gt;&lt;a href="#" className="footer-linktext"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;span&gt;© 2019 Developed by Pat. All Rights Reserved.&lt;/span&gt;
         &lt;/footer&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/React.Fragment&gt;
        )  
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;title&gt;Calculator&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Unica+One&amp;display=swap" rel="stylesheet"&gt;
        &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div id="app"&gt;
        &lt;/div&gt; 
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>