Почему на мобильной версии сайта две полосы прокрутки?

Question

[stanislavkm]

Есть страница с двумя яндекс картами на ней (если важно). В мобильной версии в сафари страница скролится нормально, открыл на andorid в chrome - страница еле как скролится, видны две полосы прокрутки (можно проскролить, если только изменять масштаб страницы). Подскажите, как решить, пожалуйста

Comments

[Евгений Залецкий]

Можно код и скрины? А то не понятно о чём вы.

[Anonymous Penguin]

Евгений Залецкий, классика

[stanislavkm]

Евгений Залецкий,
со скролами не скринится...
где красным обведено - там был скрол телефона и поверх него появляется скрол браузера

html:

html {
    scroll-behavior: smooth;
    height: 100%;
    overflow-x: hidden;
}
body{
    min-height: 100%;
    overflow-x: hidden;
}

<div class="white_bg">
      <CartOrder :cart_data="CART">
      </CartOrder>
      <section class="contacts_section">
        <div class="contacts">
          <div class="contacts__svetlyi">
            <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A5147b5903c247d157dc9bc338dcd03bfe2369ffa9d6d52c2a92ffd9555049d73&amp;source=constructor" width="550" height="260" frameborder="0"></iframe>
            <div class="contacts_description">
              <div class="contacts_title">Кафе-пекарня Лас Мохитос</div>
              <div class="contacts_desc"><i class="fa contacts_icon fa-map-marker" aria-hidden="true"></i>Поселок Светлый, 15А</div>
              <div class="contacts_desc"><i class="fa contacts_icon clock_icon fa-clock-o" aria-hidden="true"></i>9:00 - 20:00</div>
              <div class="contacts_desc"> <i class="fa contacts_icon fa-phone" aria-hidden="true"></i>[phone]</div>
            </div>
          </div>
          <hr class="contacts_btw">
          <div class="contacts__paritzanskaya">
            <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A840b81e31685150c5ba3f1479ab7e58d388e3e0f0571090215d740a4cfdfa23e&amp;source=constructor" width="550" height="260" frameborder="0"></iframe>
            <div class="contacts_description">
              <div class="contacts_title">Кафе-пекарня Чехия</div>
              <div class="contacts_desc"><i class="fa contacts_icon fa-map-marker" aria-hidden="true"></i>ул. Партизанская, 8В</div>
              <div class="contacts_desc"><i class="fa contacts_icon fa-clock-o" aria-hidden="true"></i>9:00 - 20:00</div>
              <div class="contacts_desc"><i class="fa contacts_icon fa-phone" aria-hidden="true"></i>[phone]</div>
            </div>
          </div>
        </div>
      </section>
    </div>

css:

.white_bg{
    background: #FFFFFF;
    padding-top: 95px;
}
.contacts__svetlyi {
    display: flex;
    margin: 0 0 25px 180px;
}
.contacts__paritzanskaya {
    display: flex;
    margin: 0 0 0 180px;
    padding-bottom: 40px;
}
.contacts_description{
    margin-left: 70px;
}
.contacts_btw{
    display: none;
}
.contacts_icon {
    color: #76b400;
    width: 28px;
    height: 28px;
    text-align: center;
    margin-right: 35px;
}
.contacts_title{
    margin: 10px 0;
    font-family: 'Oswald', sans-serif;
    font-size: 3.2em;
    color: #1a2e39;
    font-weight: 400;
}
.contacts_desc{
    font-family: 'Oswald', sans-serif;
    font-size: 2em;
    color: #1a2e39;
    font-weight: 300;
}
iframe{
    border:none;
    border-radius: 10px;
}

знаю, что верстка и стили немного корявые.

[Евгений Залецкий]

stanislavkm, спасибо. А ответь ещё на один вопрос. А если карту убрать, второй скрол пропадает?

[stanislavkm]

Евгений Залецкий, нет

[Ankhena]

Проверяйте все блоки у которых есть высота и overflow (причем по х тоже).

Answer 1

[Максим Васильев]

Здравствуйте, страницу необходимо оптимизировать под разные экраны.
Сделать это можно с помощью JavaScript, то что страница будет автоматически подгоняться под разрешение экрана.

Посмотрите как это сделать на YouTube, там подробно опишут как это сделать.

Comments

[stanislavkm]

Максим Васильев, вы не про media-запросы?

[Евгений Залецкий]

stanislavkm, только хотел про это написать. Да, у тебя оптимизация идёт от телефона, сделай адаптивный дизайн мод мобильные

[stanislavkm]

Евгений Залецкий, он у меня адаптивный. суть в том, что в сафари на ios отображает нормально, в хроме на андроиде - нет.

[Евгений Залецкий]

stanislavkm, а как он может быть адаптивный без ничего? У тебя большая страница сама по себе. Возможно Я ошибаюсь.

[stanislavkm]

Евгений Залецкий,я сделал скрин проекта с телефона.
писался он изначально под десктоп. медиа прописывались под разрешения =< 1900px

[Евгений Залецкий]

stanislavkm, а проблем на ноутбуке/ПК нет?

[stanislavkm]

Евгений Залецкий, нет, все хорошо

[Евгений Залецкий]

stanislavkm, ну вот, мне кажется если сделать

@media (max-width: XXXXpx){
тут стили
}

То проблема с скролами не будет.

Answer 2

[I.CaR Soft]

Пробуйте использовать viewport: https://www.w3schools.com/css/css_rwd_viewport.asp