Не адекватно ведет себя при адаптиве. Обрезает футер, хедер уплывает, скролл горизонтальный появляется

Question

/* обнуление и шрифты */
margin:0;
padding:0;
box-sizing: border-box;
}
html,
body{
margin: 0;
   padding:0;
   box-sizing: border-box;
   font-family: 'Montserrat', sans-serif;
   /* font-family: 'Stick No Bills', sans-serif; для хедера */
}
ul,li{
   list-style:none;
   margin:0;
   padding:0;
   box-sizing: border-box; 
}
a:active, 
a:hover,  
a {
text-decoration: none;
color: rgb(0, 0, 0);
transition:500ms;
}
a:hover{
   color: rgb(155, 25, 5);
   transition:500ms;
}
img{
   width: 100%;
   height: 100%;
   object-fit: contain;
}
/* ----------------------- */

/* отступ для якоря */

section{
   margin-top: -50px; 
   padding-top: 50px;
}
/* -------------------- */
.wrapper-global{
   min-height: 100%;
   margin: 0 auto;
   max-width:1100px; 
   min-width:420px;
display: flex;
flex-direction:column;
}
.header{
min-width: 100%;
height:100px;
position:sticky;
top:0;
z-index: 999;
background:  rgb(236, 209, 97);
}
.nav{
   min-width:100%;
   min-height:100%;
   display:flex;
}
.logo{
min-height:100%;
min-width:20%;
background-image:url(../img/logo.png);
background-repeat:no-repeat;
background-size:contain;
}
.row-menu{
display:flex;
justify-content:space-around;
min-width:80%;
height:100%;
padding-top: 2%;
}
.column{
   text-align:center;
   padding-left:4px;
   padding-right:4px;
   border-left:1px solid #000;
   border-right:1px solid #000;
}
.column__list{
margin-top:3% ;
font-weight: bold;
padding-left:4px;
padding-right:4px;
}
.burger{
   width:60px;
   height:60px;
   border:1px solid #000;

}
/* основной контент */
.wrapper-main{
   min-width: 90%;
}

hr{
   margin: -40px auto ;
    padding: 0;
    height: 50px;
    border: none;
    border-bottom: 1px solid #1f1209;
    box-shadow: 0 20px 20px -20px #333;
    width: 95%;
}

.title{
text-align: center;
margin-top:40px; 
}
/* решение для отступа хедера */
.marginHeader{
   position:relative; 
   top:-100px;
}
/* -------- */
.row{
margin:0 2%;   
}
.line{
   display:flex;
   justify-content:space-between;
   min-width:100%;
}
/* .wrapper-station{
   min-width:20%;
} */

/* рок */
.biker--radio{
background-image: url(../img/rock\ байкер.png);
background-size: contain;
background-repeat: no-repeat;

}
.imagine--radio{
background-image: url(../img/rock\ имажин.jpg);
background-repeat: no-repeat;
background-size:contain;
}
.interra--radio{
background-image: url(../img/rock\ \ интерра.png);
background-repeat: no-repeat;
background-size:contain;
}
.iskatel--radio{
background-image: url(../img/rock\ искатель.jpg);
background-repeat: no-repeat;
background-size:contain;
}
.maksimum--radio{
   background-image: url(../img/rock\ \ максимум.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.moto--radio{
   background-image: url(../img/rock\ моторадио.png);
   background-repeat: no-repeat;
   background-size:contain;
}
.nashe--radio{
   background-image: url(../img/rock\ \ наше\ радио.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.rockfm--radio{
   background-image: url(../img/rock\ \ Рок\ фм.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
/* танцевальное */
.dfm--radio{
   background-image: url(../img/dancing\ dfm.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.kiss--radio{
   background-image: url(../img/dancing\ kiss.png);
   background-repeat: no-repeat;
   background-size:contain;
}
.rs--radio{
   background-image: url(../img/dancing\ rs.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.vishka--radio{
   background-image: url(../img/dancing\ вышка.jpg);
   background-repeat: no-repeat;
   background-size:cover;
   background-position: 50%;
}
.horizont--radio{
   background-image: url(../img/dancing\ горизонт.jpg);
   background-repeat: no-repeat;
   background-size:cover;
   background-position: 50%;
}
.flame--radio{
   background-image: url(../img/dancing\ огонёк.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.pirate--radio{
   background-image: url(../img/dancing\ пиратская\ станция.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.record--radio{
   background-image: url(../img/dancing\ рекорд.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
/* шансон */
.doroga--radio{
   background-image: url(../img/shanson\ doroga.png);
   background-repeat: no-repeat;
   background-size:contain;
}
.good--radio{
   background-image: url(../img/shanson\ good.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.kalina--radio{
   background-image: url(../img/shanson\ kalina.png);
   background-repeat: no-repeat;
   background-size:90%;
   background-position: 50% 50%;
   
}
.magic--radio{
   background-image: url(../img/shanson\ magic.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.odessa--radio{
   background-image: url(../img/shanson\ odessa.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.pale--radio{
   background-image: url(../img/shanson\ pale.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.shanson--radio{
   background-image: url(../img/shanson\ radio.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.france--radio{
   background-image: url(../img/shanson\ france.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}

/* классическое */
.classic--radio{
   background-image: url(../img/classic\ classic.png);
   background-repeat: no-repeat;
   background-size:cover;
background-size: 90%;
background-position: 50% 50%;
}
.classique--radio{
   background-image: url(../img/classic\ classique.png);
   background-repeat: no-repeat;
   background-size:contain;
}
.culture--radio{
   background-image: url(../img/classic\ culture.png);
   background-repeat: no-repeat;
   background-size:contain;
}
.muzkom--radio{
   background-image: url(../img/classic\ muzkom.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.orfei--radio{
   background-image: url(../img/classic\ orfei.png);
   background-repeat: no-repeat;
   background-size:contain;
}
.spr--radio{
   background-image: url(../img/classic\ piano.png);
   background-repeat: no-repeat;
   background-size:cover;
   background-position: 50%;
}
.praha--radio{
   background-image: url(../img/classic\ praha.png);
   background-repeat: no-repeat;
   background-size:contain;
}
.simphony--radio{
   background-image: url(../img/classic\ simfony.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
/* новости */
.freedom--radio{
   background-image: url(../img/news\ freedom.png);
   background-repeat: no-repeat;
   background-size:cover;
   background-position: 50%;
}
.eho--radio{
   background-image: url(../img/news\ eho.jpg);
   background-repeat: no-repeat;
   background-size:cover;
   background-position: 50%;
}
.mayak--radio{
   background-image: url(../img/news\ mayak.png);
   background-repeat: no-repeat;
   background-size:contain;
}
.mir--radio{
   background-image: url(../img/news\ mir.png);
   background-repeat: no-repeat;
   background-size:90%;
   background-position: 50% 50%;
}
.puls--radio{
   background-image: url(../img/news\ puls.png);
   background-repeat: no-repeat;
   background-size:contain;
}
.russia--radio{
   background-image: url(../img/news\ russia.jpg);
   background-repeat: no-repeat;
   background-size:cover;
   background-position: 50%;
}
.smart--radio{
   background-image: url(../img/news\ smart.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.vesti--radio{
   background-image: url(../img/news\ vesti.png);
   background-repeat: no-repeat;
   background-size:90%;
   background-position: 50% 50%;
}
/* джазз */
.jazz--radio{
   background-image: url(../img/jazz\ 1jazz.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.barhat--radio{
   background-image: url(../img/jazz\ barhat.png);
   background-repeat: no-repeat;
   background-size:contain;
}
.blue--radio{
   background-image: url(../img/jazz\ blue.jpg);
   background-repeat: no-repeat;
   background-size:90%;
   background-position: 50% 50%;
}
.costa--radio{
   background-image: url(../img/jazz\ costa.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.soul--radio{
   background-image: url(../img/jazz\ J.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.relax--radio{
   background-image: url(../img/jazz\ relax.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.smooth--radio{
   background-image: url(../img/jazz\ smooth.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
.xo--radio{
   background-image: url(../img/jazz\ xo.jpg);
   background-repeat: no-repeat;
   background-size:contain;
}
   
.station{
width:200px;
height:200px;
border: 1px solid #000;
margin-top:30px;
transition: 500ms;
}
.station:hover{
   transform:scale(1.1,1.1);
   transition: 500ms;
   cursor: pointer;
}
/* футер */
.wrapper-footer{
height: 80px;
margin-top: 2%;
width: 100%;
}
.footer{
width: 100%;
height:100%;
display:flex;
justify-content:space-between;
background:rgb(236, 209, 97);
}
.footer__info{
   display:flex;
   justify-content:space-between;
   width:100%;
}

.network-list{
   margin-right:10%;
}
.info__network{
   display:flex;
   justify-content:space-around;
   margin-top: 10px;
}

.footer__logo{
   height:100%;

}


.icons-network{
   height:20px;
   width:20px;
}


/* adaptive */
@media all and (max-width:3000px){
   .burger{
   display: none;
   }
}


@media all and (max-width:900px){
html,
body{
   font-size: 12px;
}

.column{
   display:none;
}
.row-menu{
   display:flex;
   justify-content:flex-end;
   }
.burger{
   display:block;
   margin-right: 20px;
}
.line{
   flex-wrap: wrap;
justify-content:space-around;

}
.row{
   
}
.wrapper-station{
width:50%;
}
.station{
   margin: 10px auto;
   width: 180px;
   height: 180px;
}


.info__network{
   display:flex;
   justify-content:space-between;
   margin-top: 10px;
}

.info__contact>li{
   margin: 5px;
}

.station:hover{
   transform:none;
   transition: none;
   cursor: none;
 
   opacity:0.6;
}
}

<!DOCTYPE html>
<html lang="en">

<head>
   <link rel="stylesheet" href="../Radio/css/style.css">
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>RadioHippo</title>
</head>

<body>
   <!-- главная оболочка -->
   <div class="wrapper-global">
      <!-- шапка сайта -->

      <header class="header">
         <!-- панель навигации -->
         <nav class="nav">
            <!-- обёртка для лого -->
            <div class="logo">
               <!-- лого как бекграунд -->

            </div>
            <!-- ряд с меню -->
            <div class="row-menu">
               <!-- меню в виде списков -->
               <ul class="column column--one">
                  <a href="#rock">
                     <li class="column__list rock">Рок</li>
                  </a>
                  <a href="#dancing">
                     <li class="column__list dancing">Танцевальное</li>
                  </a>
               </ul>

               <ul class="column column--two">
                  <a href="#shanson">
                     <li class="column__list shanson">Шансон</li>
                  </a>
                  <a href="#classic">
                     <li class="column__list classic">Классическое</li>
                  </a>
               </ul>

               <ul class="column column--three">
                  <a href="#news">
                     <li class="column__list news">Новости</li>
                  </a>
                  <a href="#jazz">
                     <li class="column__list jazz">Джазз</li>
                  </a>
               </ul>

               <ul class="column column--four">
                  <a href="#sport">
                     <li class="column__list sport">Спортивное</li>
                  </a>
                  <a href="#podcast">
                     <li class="column__list podcast">Подкасты</li>
                  </a>
               </ul>
               <div class="burger"></div>
            </div>
         </nav>
      </header>

      <!-- основной контент -->
      <div class="wrapper-main">
         <main class="main-content">
            <span id="rock" class="marginHeader"></span>
            <!-- рок ряд -->
            <h2 class="title">Рок</h2>
            <hr>

            <section class="row row--rock">
               <!-- станции в ряду -->
               <div class="line line-rock-one">

                  <div class="wrapper-station">
                     <div class="station biker--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station imagine--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station interra--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station iskatel--radio"></div>
                  </div>

               </div>

               <div class="line line-rock-two">
                  <div class="wrapper-station">
                     <div class="station maksimum--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station moto--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station nashe--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station rockfm--radio"></div>
                  </div>
               </div>
            </section>
            <span id="dancing" class="marginHeader"></span>
            <!-- танцевальный ряд -->
            <h2 class="title">Танцевальное</h2>
            <hr>

            <section class="row row--dancing">
               <!-- станции в ряду -->
               <div class="line line-dancing-one">
                  <div class="wrapper-station">
                     <div class="station dfm--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station kiss--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station rs--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station vishka--radio"></div>
                  </div>
               </div>
               <div class="line line-dancing-two">
                  <div class="wrapper-station">
                     <div class="station horizont--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station flame--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station pirate--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station record--radio"></div>
                  </div>
               </div>
            </section>
            <span id="shanson" class="marginHeader"></span>
            <!-- шансон ряд -->
            <h2 class="title">Шансон</h2>
            <hr>
            <section class="row row--shanson">
               <!-- станции в ряду -->
               <div class="line line-shanson-one">
                  <div class="wrapper-station">
                     <div class="station doroga--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station good--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station kalina--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station magic--radio"></div>

                  </div>
               </div>
               <div class="line line-shanson-two">
                  <div class="wrapper-station">
                     <div class="station odessa--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station pale--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station shanson--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station france--radio"></div>
                  </div>
               </div>
            </section>
            <span id="classic" class="marginHeader"></span>
            <!-- классический ряд -->
            <h2 class="title">Классическое</h2>
            <hr>

            <section class="row row--classic">
               <!-- станции в ряду -->
               <div class="line line-classic-one">
                  <div class="wrapper-station">
                     <div class="station classic--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station classique--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station culture--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station muzkom--radio"></div>
                  </div>
               </div>
               <div class="line line-classic-two">
                  <div class="wrapper-station">
                     <div class="station orfei--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station spr--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station praha--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station simphony--radio"></div>
                  </div>
               </div>
            </section>
            <span id="news" class="marginHeader"></span>
            <!-- новостной ряд -->
            <h2 class="title">Новости</h2>
            <hr>

            <section class="row row--news">
               <!-- станции в ряду -->
               <div class="line line-news-one">
                  <div class="wrapper-station">
                     <div class="station freedom--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station eho--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station mayak--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station mir--radio"></div>
                  </div>
               </div>
               <div class="line line-news-two">
                  <div class="wrapper-station">
                     <div class="station puls--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station russia--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station smart--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station vesti--radio"></div>
                  </div>
               </div>
            </section>

            <!-- Джазз ряд -->

            <div id="jazz" class="marginHeader"></div>
            <h2 class="title">Джазз</h2>
            <hr>

            <section class="row row--jazz">
               <!-- станции в ряду -->
               <div class="line line-jazz-one">
                  <div class="wrapper-station">
                     <div class="station jazz--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station barhat--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station blue--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station costa--radio"></div>
                  </div>
               </div>
               <div class="line line-jazz-two">
                  <div class="wrapper-station">
                     <div class="station soul--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station relax--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station smooth--radio"></div>
                  </div>
                  <div class="wrapper-station">
                     <div class="station xo--radio"></div>
                  </div>
               </div>
            </section>
            

      <!-- подвал сайта -->
      <div class="wrapper-footer">
         <footer class="footer">
            <div class="footer__info">

               <div class="contacts-list">
                  <h4 class="title-contacts">Контакты:</h4>
                  <ul class="info__contact">
                     <li class="contact__email contact-list">E-mail: [email protected]</li>
                     <li class="contact__tel contact-list">Тел: 8-928-334-30-06</li>
                  </ul>
               </div>

               <div class="network-list">
                  <h4 class="title-network">Мы в социальных сетях</h4>
                  <ul class="info__network">
                     <a href="https://vk.com/hippotred" target="_blank">
                        <li class="icons-network vk"><img src="../Radio/img/vkontakte.png" alt=""></li>
                     </a>
                     <a href="https://www.instagram.com/tonyhippo/ " target="_blank">
                        <li class="icons-network insta"><img src="../Radio/img/inst.png" alt=""></li>
                     </a>
                     <a href="https://t.me/nektown" target="_blank">
                        <li class="icons-network tlg"><img src="../Radio/img/telegram.png" alt=""></li>
                     </a>
                  </ul>
               </div>
               <div class="footer__logo"><img src="../Radio/img/logo.png" alt=""></div>
            </div>

         </footer>
      </div>
      <script src="../lesson/js/main.js"></script>
</body>

</html>

Answer 1

Добавьте в <head> мета тег с name="viewport".

Подробнее: https://developer.mozilla.org/ru/docs/Glossary/Viewport

У себя в проектах использую эту конструкцию в <head> :

<meta id="m360" name="viewport" content="width=device-width, initial-scale=1">
<script>
  if (screen.width < 360) {
    var mvp = document.getElementById('m360');
    mvp.setAttribute('content','width=360, user-scalable=0');
  };

  window.addEventListener("resize", function() {
    var mvp = document.getElementById('m360');
    mvp.setAttribute('content','width=device-width, user-scalable=0');

    if (screen.width < 360) {
      var mvp = document.getElementById('m360');
      mvp.setAttribute('content','width=360, user-scalable=0');
    }
  }, false);
</script>
<meta content='true' name='HandheldFriendly'/>
<meta content='width' name='MobileOptimized'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>

Где 360 - это минимальная ширина страницы в px, можете изменить на ту, которая нужна Вам.

БЛОГ НА HUSL

Не адекватно ведет себя при адаптиве. Обрезает футер, хедер уплывает, скролл горизонтальный появляется

Ответы (1 шт):