Content shrinks on screens of small width - Telegram API

Max
March 2, 2022
70 views
2 votes
3 Answers

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 class="menuButton">☰</div>
    <nav>
        <a href="/" class="logo">Cite</a>
        <div class="nav">
            <ul>
                <li><div class="orderButton">Заказать</div></li>
                <li><a href="/about.php" id="aboutBtn">О нас</a></li>
                <li><a href="#bottom" id="contactsBtn">Контакты</a></li>
            </ul>
        </div>
    </nav>
    </header>
  <div class="flex-mob">
        <div class="flex-text-mob">
            <h2>Адаптивный дизайн</h2>
            <p>Одинаково хорошо отображается как на мобильных устройствах, так и на десктопах и ноутбуках.</p>
        </div>  
        <div class="flex-device"></div>
        <div class="flex-text-mob">
            <h2>Портрет | ландшафт</h2>
            <p>Элементы дизайна подстраиваются под ориентацию экрана и размеры окна.</p>
        </div>
    </div>
    <footer>
            <div class="footer-line footer-cont">
                <div class="footer-line-cont">
                    <div class="footer-line-text">Связь с нами:</div>
                    <div class="social">
                        <img class="social-icon" src="images/inst.png" alt="instagram">
                        <img class="social-icon" src="images/telegram.png" alt="telegram">
                    </div>
                </div>
            </div>
            <div class="footer-cont">
                <div class="footer-flex">
                    <div class="footer-flex-text">
                        Остались вопросы? Вы всегда можете связаться с нами и уточнить интересующие детали.
                    </div>
                    <div class="s25"></div>
                    <div class="footer-flex-contacts">
                        <span>+38 (095) 415 31 56</span>
                        <span><a href="mailto:[email protected]">[email protected]</a></span>
                        <button type="button" class="orderButtonFoot">Заказать</button>
                    </div>
                </div>
                <div class="footer-remarks">
                    <p><sup>1</sup> Домен оплачивается заказчиком отдельно раз в год, согласно тарифа регистратора.</p>
                    <p><sup>2</sup> Хостинг также оплачивается заказчиком отдельно. Мы не несем ответственности за изменение тарифов хостинг-провайдеров и регистраторов.</p>
                </div>
            </div>
            <div class="copyright-cont">
                <div class="copyright">
                    <?php echo '&copy; Cite, ' . date("Y") . '. Сайты на заказ.' ?>
                </div>
                <div class="bugreport">
                    Нашли ошибку или баг на сайте? Сообшите нам.
                </div>
            </div>
        </footer>
    </body>
    <script src="js/script.js"></script>
    <script src="js/zenscroll.js"></script>
</html>

Answers

Chosen as BEST ANSWER
- Max
- March 2, 2022 at 2:29 pm
- 0 votes
0
Finally, I found the solution. I am not sure if it is the best way to workaround this problem but it is still here.

SOLUTION: I added min-width: 360px to the whole body and then removed initial-scale from meta tag (to prevent appearing a horizontal scroll if screen width less than 360px).

But now all elements with heigh: 100% or 100vh are less than actual screen height on screens less than 360px and visualViewport.scale is still less than 1.

(Edit)

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

- LuigySwag
- April 12, 2023 at 1:53 am
- 0 votes
0
I was having the same problem, min-w-fit in tailwind, or equivalenty, min-width: fit-content fixed it for me.

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Content shrinks on screens of small width – Telegram API

Answers