title: Bad render mobile menu only Iphone - diffrent height?
body: <p>I have problem with my website.
  I did responsive website with mobile menu and it's looking very good on Developere Mode with responsive and android phone but on iphone it look terrible..
  Here on dev tools/android:
  <a href="https://i.stack.imgur.com/VmPxy.pngH" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VmPxy.pngH" alt="enter image description here" /></a></p>
  <p>Here on iphone:</p>
  <p><a href="https://i.stack.imgur.com/FTHuq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FTHuq.jpg" alt="enter image description here" /></a></p>
  <p>Code:
  HTML:</p>
  <pre><code>&lt;header class=&quot;header&quot;&gt;
      &lt;div class=&quot;header-wrapper&quot;&gt;
          &lt;div class=&quot;header-logo&quot; id=&quot;headerLogo&quot;&gt;
              &lt;img src=&quot;assets/images/logo_right.svg&quot; alt=&quot;Logo company&quot; height=&quot;70px&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;header-logo header-logo--mobile&quot;&gt;
              &lt;img class=&quot;logo-mobile&quot; src=&quot;assets/images/logo.png&quot; alt=&quot;Logo company&quot; height=&quot;70px&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;header-contact-container&quot;&gt;
              &lt;div class=&quot;header-contact__item&quot;&gt;
                  &lt;div class=&quot;header-contact__icon&quot;&gt;
                      &lt;i class=&quot;gg-phone&quot;&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;nav class=&quot;site-nav&quot; id=&quot;nav__main&quot;&gt;
          &lt;ul class=&quot;site-nav__list&quot;&gt;
              &lt;li class=&quot;site-nav__item site-nav__item--is-hidden&quot;&gt;
                  &lt;a class=&quot;site-nav__anchor&quot; href=&quot;#&quot; id=&quot;mobile_nav&quot;&gt;MENU&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;site-nav__item&quot;&gt;
                  &lt;a class=&quot;site-nav__anchor&quot; href=&quot;javascript: scrollSmoothTo('mainWrapper')&quot;
                     id=&quot;homeNavButton&quot;&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;site-nav__item&quot;&gt;
                  &lt;a class=&quot;site-nav__anchor&quot; href=&quot;javascript: scrollSmoothTo('aboutUs')&quot;
                     id=&quot;aboutNavButton&quot;&gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;site-nav__item&quot;&gt;
                  &lt;a class=&quot;site-nav__anchor&quot; href=&quot;javascript: scrollSmoothTo('services')&quot; id=&quot;servicesNavButton&quot;&gt;Services&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;site-nav__item&quot;&gt;
                  &lt;a class=&quot;site-nav__anchor&quot; href=&quot;javascript: scrollSmoothTo('contact')&quot; id=&quot;contactNavButton&quot;&gt;Contact&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  <p>CSS DEFAULT</p>
  <pre><code>.header {
      display: block;
  }
  
  .header-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      width: 65%;
      padding: 30px 0;
      margin: 0 auto;
  }
  
  .header-logo {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
  }
  
  .header-logo--mobile {
      display: none;
  }
  
  .header-contact-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
  }
  
  .header-contact__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
  }
  
  .header-contact__title {
      font-size: 1.2rem;
      text-transform: uppercase;
      margin: 0 0 10px;
  }
  
  .header-contact__data {
      text-align: center;
  }
  
  .header-contact__icon {
      display: block;
      margin-left: 15px;
      height: 100%;
  }
  
  .site-nav {
      height: 50px;
      background: rgb(250, 255, 253);
      border-top: 1px solid rgba(224, 224, 224, 0.68);
      border-bottom: 1px solid rgba(224, 224, 224, 0.68);
      z-index: 999;
  }
  
  .site-nav__list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin: 0 auto;
      padding: 0;
      height: 100%;
      list-style: none;
  }
  
  .site-nav__item--is-hidden {
      display: none;
  }
  
  .site-nav__item {
      width: 180px;
      height: 80%;
  }
  
  .site-nav__anchor {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 100%;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      color: rgb(6, 67, 62);
      font-family: 'Sora', sans-serif;
      font-weight: 500;
      font-size: 1.1em;
      text-transform: uppercase;
      text-decoration: none;
      -webkit-appearance: none!important;
  }
  
  .site-nav__anchor:hover {
      font-size: 1.2rem;
      color: #ffcc00;
  }
  
  .header-nav--sticky {
      position: fixed;
      top: 0;
      width: 100%;
  }
  </code></pre>
  <p>CSS MOBILE</p>
  <pre><code>    .header-wrapper {
          display: block;
          width: 100%;
          text-align: center;
      }
  
      .header-logo {
          display: none;
      }
  
      .header-logo--mobile {
          display: block;
          padding-top: 30px;
      }
  
      .logo-mobile {
      }
  
      .header-contact-container {
          display: block;
      }
  
      .header-contact__item {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          width: auto;
          padding-top: 30px;
      }
  
      .header-contact__title {
          font-size: 1.4rem;
      }
  
      .header-contact__data {
          display: block;
          /*-webkit-box-ordinal-group:3;*/
          /*-ms-flex-order:2;*/
          /*order:2;*/
          font-size: 1.2rem;
      }
  
      .site-nav {
          height: auto!important;
      }
  
      .site-nav__list {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          height: auto!important;
          /*height: auto;*/
      }
  
      .site-nav__item--is-hidden {
          display: block!important;
          background: #FFCC00;
          max-height: 100%!important;
      }
  
      .site-nav__item {
          display: none;
          width: 100%;
          max-height: 100%!important;
      }
  
      .site-nav__anchor {
          padding: 15px 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.16);
      }
  
      .site-nav__anchor:nth-child(1):hover {
          font-size: 1.2rem;
          color:inherit!important;
      }
  
  </code></pre>
  <p>JS</p>
  <pre><code>const mobileButtonMenu = document.getElementById(&quot;mobile_nav&quot;)
  mobileButtonMenu.addEventListener(&quot;click&quot;, setMobileMenu);
  
  function setMobileMenu() {
      const menu = document.querySelectorAll(&quot;.site-nav__item&quot;)
      if (menu[1].style.display === &quot;block&quot;) {
          menu[1].style.display = &quot;none&quot;;
          menu[2].style.display = &quot;none&quot;;
          menu[3].style.display = &quot;none&quot;;
          menu[4].style.display = &quot;none&quot;;
      } else {
          menu[1].style.display = &quot;block&quot;;
          menu[2].style.display = &quot;block&quot;;
          menu[3].style.display = &quot;block&quot;;
          menu[4].style.display = &quot;block&quot;;
      }
  }
  </code></pre>
  <p>I dont know what I have to do. I think that problem may be with height:auto, because other elements with flex was be good render.</p>