title: css white space on the bottom of the page only on mobile version
body: <p>I have a responsive design that work well but i have a problem only on mobile devices that i have a white space in the bottom of the page</p>
  <pre><code>* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  html {
      scroll-behavior: smooth;
      overflow-x: hidden;
  }
  
  body {
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      overflow-x: hidden;
  }
  </code></pre>
  <p>I tried to put</p>
  <pre><code>html {
  height: 100%;
  }
  
  body {
  min-height: 100%;
  }
  </code></pre>
  <p>but it didn't work</p>
  <p>i check the css code if i have a big hight in an element but i don't have</p>
  <p>i used the</p>
  <pre><code>*{
   border: 1px solid red;
  }
  </code></pre>
  <p>but also i didn't know how to fix it</p>
  <p>i tried <code>margin</code> and <code>padding 0</code> for the <code>p</code> in the footer but also this doesn't fix the problem</p>
  <p>online link for the website</p>
  <p><a href="https://mhmd2991.github.io/template-03/" rel="nofollow noreferrer">my website</a></p>
  <p>This problem appear only on the mobile device on the tablet and pcs i don't have this problem</p>
  <p>How can i remove this white space in the bottom of the page on mobile devices?</p>