Content shrinks on screens of small width-CodePudding

I was testing my website in Chrome inspector (mobile device mode) and noticed that when screen width becomes less than about 350px, the footer starts to shrink as shown on picture

https://i.stack.imgur.com/B9cA1.png

(but all other elements don't). And also I've noticed that if screen is less than 350px in width, the output of visualViewport.scale in console returns the value less than 1.

My meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, shrink-to-fit=no">

I didn't put the page code here, because it will be too much. What could possibly cause a problem?

UPD: Added snippet.

footer {
    font-weight: 300;
    margin-top: auto;
    background-color: rgb(36, 36, 36);
    color: rgb(156, 156, 156);
}

.footer-cont {
    padding: 0 5%;
}

.footer-line {
    height: 60px;
    margin-bottom: 30px;
    background-color: rgb(32, 32, 32);
    color: whitesmoke;
}

.footer-line-cont {
    display: flex;
    margin: auto;
    font-weight: 500;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.footer-line-text {
    font-size: 0.8em;
    padding: 0 5px;
}

.social {
    height: 100%;
}

.social-icon {
    height: 100%;
    padding: 20px 15px;
}

.footer-flex {
    display: flex;
    margin: auto;
    justify-content: space-between;
}

.footer-flex-text {
    line-height: 1.8em;
    max-width: 400px;
    font-size: 0.9em;
}

.footer-flex-contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 400px;
    font-size: 0.9em;
}

.footer-flex-contacts span {
    font-size: 1.1em;
    line-height: 1.8em;
    white-space: pre;
    margin: 0px 0;
}

.orderButtonFoot {
    width: 100%;
    border-radius: 3px;
    background-color: whitesmoke;
    color: black;
    border: 2px solid whitesmoke;
    text-align: center;
    padding: 18px 16px;
    margin: 12px 0;
    font-weight: 500;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 200ms ease, padding 0s;
    -webkit-transition: all 200ms ease, padding 0s;
    -moz-transition: all 200ms ease, padding 0s;
}

.orderButtonFoot:hover {
    background-color: rgba(0, 0, 0, 0);
    color: white;
}

.footer-remarks {
    padding: 10px 0;
}

.footer-remarks p {
    font-size: 12px;
    padding: 5px 0px;
}

.copyright-cont {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 20px;
    background-color: rgb(41, 41, 41);
    color: whitesmoke;
}

.bugreport {
    text-align: right;
}

@media (max-width: 600px) {
    .bugreport {
        display: none;
    }

    .copyright-cont {
        justify-content: center;
    }
}

@media (max-width: 500px) {
    .footer-line {
        height: 80px;
        padding: 10px 5%;
    }

    .footer-flex {
        flex-direction: column;
    }

    .footer-flex-text {
        margin: auto;
        text-align: center;
    }

    .footer-flex-contacts {
        margin: auto;
        align-items: center;
    }

    .orderButtonFoot {
        margin-top: 20px;
    }
}



header {
    background-color: rgba(24, 24, 24, 0.95);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
}

.menuButton {
    display: none;
    position: absolute;
    right: 0;
    color: white;
    font-size: 1.5em;
    line-height: 65px;
    text-align: center;
    margin: 10px 10px;
    width: 65px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    z-index: 2;
}

.logo {
    color: white;
    font-size: 30px;
    font-weight: bold;
    font-family: 'Fredoka One', Arial;
    line-height: 65px;
    padding: 0 8px;
}

.margin-nav {
    height: 85px;
}

nav {
    position: relative;
    padding: 10px 5%;
    display: flex;
    margin: auto;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

nav div ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin: 0px 3px;
}

nav div ul li a {
    display: block;
    text-align: center;
    padding: 16px 16px;
}

nav div ul li a.active {
    color: rgb(155, 155, 155);
}

.orderButton {
    border-radius: 3px;
    background-color: #e8e8e8;
    color: black;
    border: 2px solid #e8e8e8;
    text-align: center;
    padding: 14px 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 200ms ease, padding 0s;
    -webkit-transition: all 200ms ease, padding 0s;
    -moz-transition: all 200ms ease, padding 0s;
}

.orderButton:hover {
    background-color: rgba(0, 0, 0, 0);
    color: white;
}

@media (max-width: 500px) {
    nav div ul {
        text-align: center;
        flex-direction: column;
        margin-top: 50px;
        transition: opacity 200ms ease;
    }
    
    nav div ul li {
        margin: 20px 3px;
    }
    
    nav {
        flex-direction: column;
    }

    .nav {
        overflow: hidden;
        height: 0;
        width: 100%;
        max-width: 400px;
        transition: height 300ms ease-in-out;
        -webkit-transition: height 300ms ease-in-out;
        -moz-transition: height 300ms ease-in-out;
    }

    .orderButton {
        padding: 20px;
    }
    
    .logo {
        text-align: center;
    }
    
    .menuButton {
        display: block;
    }

    .nav.active {
        height: 100vh;
    }
}

.flex-mob {
            display: flex;
            height: 60vh;
            text-align: center;
            align-items: center;
            justify-content: center;
            margin: 30px 0;
            flex: 1;
            }

<head>
<html>
 <body>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, shrink-to-fit=no">
</head>
<header>
        <div >&#9776;</div>
    <nav>
        <a href="/" >Cite</a>
        <div >
            <ul>
                <li><div >Заказать</div></li>
                <li><a href="/about.php" id="aboutBtn">О нас</a></li>
                <li><a href="#bottom" id="contactsBtn">Контакты</a></li>
            </ul>
        </div>
    </nav>
    </header>
  <div >
        <div >
            <h2>Адаптивный дизайн</h2>
            <p>Одинаково хорошо отображается как на мобильных устройствах, так и на десктопах и ноутбуках.</p>
        </div>  
        <div ></div>
        <div >
            <h2>Портрет | ландшафт</h2>
            <p>Элементы дизайна подстраиваются под ориентацию экрана и размеры окна.</p>
        </div>
    </div>
    <footer>
            <div >
                <div >
                    <div >Связь с нами:</div>
                    <div >
                        <img  src="images/inst.png" alt="instagram">
                        <img  src="images/telegram.png" alt="telegram">
                    </div>
                </div>
            </div>
            <div >
                <div >
                    <div >
                        Остались вопросы? Вы всегда можете связаться с нами и уточнить интересующие детали.
                    </div>
                    <div ></div>
                    <div >
                        <span> 38 (095) 415 31 56</span>
                        <span><a href="mailto:[email protected]">[email protected]</a></span>
                        <button type="button" >Заказать</button>
                    </div>
                </div>
                <div >
                    <p><sup>1</sup> Домен оплачивается заказчиком отдельно раз в год, согласно тарифа регистратора.</p>
                    <p><sup>2</sup> Хостинг также оплачивается заказчиком отдельно. Мы не несем ответственности за изменение тарифов хостинг-провайдеров и регистраторов.</p>
                </div>
            </div>
            <div >
                <div >
                    <?php echo '&copy; Cite, ' . date("Y") . '. Сайты на заказ.' ?>
                </div>
                <div >
                    Нашли ошибку или баг на сайте? Сообшите нам.
                </div>
            </div>
        </footer>
    </body>
    <script src="js/script.js"></script>
    <script src="js/zenscroll.js"></script>
</html>

CodePudding user response：

Add body { margin: 0;}. Looks to me like a default margin on the body is showing when you are below 350px as described.

I wouldn't stress about it too hard because only a select few modern phones render widths lower than 350px.

CodePudding user response：

It seems to me that content in the .flex-mob element prevents it from shrinking beyond a certain width, while the footer continues to shrink. You might also get a horizontal scroll bar.

I typically use a "mobile first" design, in which baseline CSS defines the smallest screen size (phone) and the media queries are applied at larger sizes, using @media (min-width.... I have not changed all of your CSS to follow this strategy, but I added a definition for .flex-mob that applies flexbox only on screens that are at least 600px wide.

I also removed the margin from <body>, as suggested by カメロン.

body {
  margin: 0;
}

footer {
  font-weight: 300;
  margin-top: auto;
  background-color: rgb(36, 36, 36);
  color: rgb(156, 156, 156);
}

.footer-cont {
  padding: 0 5%;
}

.footer-line {
  height: 60px;
  margin-bottom: 30px;
  background-color: rgb(32, 32, 32);
  color: whitesmoke;
}

.footer-line-cont {
  display: flex;
  margin: auto;
  font-weight: 500;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.footer-line-text {
  font-size: 0.8em;
  padding: 0 5px;
}

.social {
  height: 100%;
}

.social-icon {
  height: 100%;
  padding: 20px 15px;
}

.footer-flex {
  display: flex;
  margin: auto;
  justify-content: space-between;
}

.footer-flex-text {
  line-height: 1.8em;
  max-width: 400px;
  font-size: 0.9em;
}

.footer-flex-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 400px;
  font-size: 0.9em;
}

.footer-flex-contacts span {
  font-size: 1.1em;
  line-height: 1.8em;
  white-space: pre;
  margin: 0px 0;
}

.orderButtonFoot {
  width: 100%;
  border-radius: 3px;
  background-color: whitesmoke;
  color: black;
  border: 2px solid whitesmoke;
  text-align: center;
  padding: 18px 16px;
  margin: 12px 0;
  font-weight: 500;
  font-size: 1.1em;
  cursor: pointer;
  transition: all 200ms ease, padding 0s;
  -webkit-transition: all 200ms ease, padding 0s;
  -moz-transition: all 200ms ease, padding 0s;
}

.orderButtonFoot:hover {
  background-color: rgba(0, 0, 0, 0);
  color: white;
}

.footer-remarks {
  padding: 10px 0;
}

.footer-remarks p {
  font-size: 12px;
  padding: 5px 0px;
}

.copyright-cont {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 20px;
  background-color: rgb(41, 41, 41);
  color: whitesmoke;
}

.bugreport {
  text-align: right;
}

@media (max-width: 600px) {
  .bugreport {
    display: none;
  }
  .copyright-cont {
    justify-content: center;
  }
}

@media (max-width: 500px) {
  .footer-line {
    height: 80px;
    padding: 10px 5%;
  }
  .footer-flex {
    flex-direction: column;
  }
  .footer-flex-text {
    margin: auto;
    text-align: center;
  }
  .footer-flex-contacts {
    margin: auto;
    align-items: center;
  }
  .orderButtonFoot {
    margin-top: 20px;
  }
}

header {
  background-color: rgba(24, 24, 24, 0.95);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
}

.menuButton {
  display: none;
  position: absolute;
  right: 0;
  color: white;
  font-size: 1.5em;
  line-height: 65px;
  text-align: center;
  margin: 10px 10px;
  width: 65px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  z-index: 2;
}

.logo {
  color: white;
  font-size: 30px;
  font-weight: bold;
  font-family: 'Fredoka One', Arial;
  line-height: 65px;
  padding: 0 8px;
}

.margin-nav {
  height: 85px;
}

nav {
  position: relative;
  padding: 10px 5%;
  display: flex;
  margin: auto;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

nav div ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin: 0px 3px;
}

nav div ul li a {
  display: block;
  text-align: center;
  padding: 16px 16px;
}

nav div ul li a.active {
  color: rgb(155, 155, 155);
}

.orderButton {
  border-radius: 3px;
  background-color: #e8e8e8;
  color: black;
  border: 2px solid #e8e8e8;
  text-align: center;
  padding: 14px 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms ease, padding 0s;
  -webkit-transition: all 200ms ease, padding 0s;
  -moz-transition: all 200ms ease, padding 0s;
}

.orderButton:hover {
  background-color: rgba(0, 0, 0, 0);
  color: white;
}

@media (max-width: 500px) {
  nav div ul {
    text-align: center;
    flex-direction: column;
    margin-top: 50px;
    transition: opacity 200ms ease;
  }
  nav div ul li {
    margin: 20px 3px;
  }
  nav {
    flex-direction: column;
  }
  .nav {
    overflow: hidden;
    height: 0;
    width: 100%;
    max-width: 400px;
    transition: height 300ms ease-in-out;
    -webkit-transition: height 300ms ease-in-out;
    -moz-transition: height 300ms ease-in-out;
  }
  .orderButton {
    padding: 20px;
  }
  .logo {
    text-align: center;
  }
  .menuButton {
    display: block;
  }
  .nav.active {
    height: 100vh;
  }
}

@media (min-width: 600px) {
  .flex-mob {
    display: flex;
    height: 60vh;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    flex: 1;
  }
}

<header>
  <div >&#9776;</div>
  <nav>
    <a href="/" >Cite</a>
    <div >
      <ul>
        <li>
          <div >Заказать</div>
        </li>
        <li><a href="/about.php" id="aboutBtn">О нас</a></li>
        <li><a href="#bottom" id="contactsBtn">Контакты</a></li>
      </ul>
    </div>
  </nav>
</header>
<div >
  <div >
    <h2>Адаптивный дизайн</h2>
    <p>Одинаково хорошо отображается как на мобильных устройствах, так и на десктопах и ноутбуках.</p>
  </div>
  <div ></div>
  <div >
    <h2>Портрет | ландшафт</h2>
    <p>Элементы дизайна подстраиваются под ориентацию экрана и размеры окна.</p>
  </div>
</div>
<footer>
  <div >
    <div >
      <div >Связь с нами:</div>
      <div >
        <img  src="images/inst.png" alt="instagram">
        <img  src="images/telegram.png" alt="telegram">
      </div>
    </div>
  </div>
  <div >
    <div >
      <div >
        Остались вопросы? Вы всегда можете связаться с нами и уточнить интересующие детали.
      </div>
      <div ></div>
      <div >
        <span> 38 (095) 415 31 56</span>
        <span><a href="mailto:[email protected]">[email protected]</a></span>
        <button type="button" >Заказать</button>
      </div>
    </div>
    <div >
      <p><sup>1</sup> Домен оплачивается заказчиком отдельно раз в год, согласно тарифа регистратора.</p>
      <p><sup>2</sup> Хостинг также оплачивается заказчиком отдельно. Мы не несем ответственности за изменение тарифов хостинг-провайдеров и регистраторов.</p>
    </div>
  </div>
  <div >
    <div >
      <?php echo '&copy; Cite, ' . date("Y") . '. Сайты на заказ.' ?>
    </div>
    <div >
      Нашли ошибку или баг на сайте? Сообшите нам.
    </div>
  </div>
</footer>