Здравствуйте, у меня вопрос по поводу адаптивной вёрстки

Question

Я собираю вёрстку, хочу добавить туда возможность адаптации, это нужно сделать с помощью @media? Я уже попытался применить @media однако выходит не правильно. Подскажите, пожалуйста, как исправить, нужно, что бы было как у сайта wildberries.

*{
    margin: 0;
    padding: 0;
}

body {
    background-color: #66CDAA;;
}

#box {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

#box .Wild {
    font-size: 50px;
    margin-right: 30px;
    margin-top: 10px;
}

i.fa {
    float: right;
    margin-top: 33px;
    z-index: 2;
    position: absolute;
    font-size: 20px;
    margin-left: 550px;
}

i.fa:hover {
    cursor: pointer
}

  #box input {
    position: relative;
    z-index: 1;
    height: 45px;
    width: 600px;
    margin-top: 20px;
    border-radius: 20px;
  }

  input::placeholder {
    padding-left: 30px;
  }

#box .Adress:hover {
    cursor: pointer;
    color: red;
}

#box .Adress i {
    font-size: 25px;
    margin-left: 60px;
    margin-top: 15px; 
     cursor: pointer; 
} 

#box .Adress p {
    font-size: 20px;
    margin-left: 25px;
    margin-top: 30px;
}

#goods {
    width: 100%;
    height: 700px;
    border: 2px solid;
    margin-top: 50px;
    border-radius: 30px;
    margin-bottom: 100px;
    background-color: white; 
    
}

.goods1 {
    display: flex;
    justify-content: center;
}

#goods .row {
    width: 350px;
    height: 250px;
    margin-top: 40px;
    margin-left: 10px;
    margin-right: 10px;
}

.row {
    display: inline-block;  
    /* display: flex; */
    /* justify-content: center; */
    overflow: hidden;    

   }
   .row img {
    transition: 1s; 
    display: block;
    border-radius: 15px;
   }
   .row img:hover {
    transform: scale(1.2); 
    cursor: pointer;
    filter: brightness(70%);
   }


   #searchbar{
    margin-left: 15%;
    padding:15px;
    border-radius: 10px;
}

input[type=text] {
    width: 30%;
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

/* When the input field gets focus,
        change its width to 100% */
input[type=text]:focus {
    width: 70%;
}

#list{
    font-size: 1.5em;
    margin-left: 90px;
}

.animals{
display: list-item; 
}


@media only screen and (max-width: 800px) {
    #box {
        background-color: red;
        width: 600px;
    }

    #goods {
        background-color: #66CDAA;
        width: 500px;
    }

    .goods1, .row img {
        width: 600px;
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">


    <title>Document</title>
</head>
<body>
    <div id="box">
        <div class="Wild"> <p>Wildberries</p> </div>

        <div>
            <i class="fa fa-search" aria-hidden="true"></i>
            <input type="text"  placeholder="Ես փնտրում եմ...">
          </div>

       
        <div class="Adress"> <i class="fa fa-map-marker" aria-hidden="true"> </i> <br> <p> Հասցեներ </p> </div>
        <div class="Adress"> <i class="fa fa-map-marker" aria-hidden="true"> </i> <br> <p> Առաքում  </p> </div>
        <div class="Adress"> <i class="fa fa-user" aria-hidden="true"></i> <br> <p> Օգտատեր  </p> </div>
        <div class="Adress"> <i class="fa fa-shopping-cart" aria-hidden="true"></i> <br> <p> Զամբյուղ </p> </div>
  </div>

  <div id="goods" style="text-align: center;">

  <div class="goods1">
    <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_mimiso_1306_TV47485.webp" alt="" class="row"></div>
        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/nm_beach.webp" alt=""></div>
        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_adidas_1306_TV8585696.webp" alt=""></div>
        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_sokolov_1306_TV859595.webp" alt=""></div>
  </div>

 <div class="goods1">
     <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_unison_1306_TV48596.webp" alt=""></div>
        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_tecno_1306_TV4785966.webp" alt=""></div>
        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_zagar3884955.webp" alt=""></div>
        <div class="row"><img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_garden738455.webp" alt=""></div>
    <!-- </div> -->
  </div>
  </div>

<script src="js/lab.js"></script>
</body>
</html>

Answer 1

Можно попробовать через bootstrap. Может не точь в точь как у Вас, зато нет горизонтальной полосы прокрутки и хэдэр видет полностью. P.S. Извиняюсь, над CSS не запаривалась... Нажмите кнопку "выполнить код" и откройте на всю страницу

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Главная</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <style>
  body {
    background-color: #66CDAA;
}
li a {
    text-align: center;
}
.color_svg path {
    fill: black;
}
.row img {
    transition: 1s; 
    display: block;
    border-radius: 15px;
   }
.row img:hover {
    transform: scale(1.2); 
    cursor: pointer;
    filter: brightness(70%);
   }
  </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row m-2 p-2">
            <div class="col-2">
                <nav class="navbar">
                    <div class="container-fluid">
                        <span class="navbar-brand mb-0 h1">Wildberries</span>
                    </div>
                </nav>
            </div>
            <div class="col-4">
                <nav class="navbar">
                    <div class="container-fluid">
                        <form class="d-flex" role="search">
                            <input class="form-control me-2" type="search" placeholder="Ես փնտրում եմ..." arial-label="Search">
                            <button class="btn btn-outline-success" type="submit">&#128269;</button>
                        </form>
                    </div>
                </nav>
            </div>
            <div class="col-6">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link link-dark" href="#">
                        <svg class="color_svg" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
                        <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg><br>Հասցեներ</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link link-dark" href="#">
                        <svg class="color_svg" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
                        <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg><br>Առաքում</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link link-dark" href="#">
                        <svg class="color_svg" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
                        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/></svg><br>Օգտատեր</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link link-dark" href="#">
                        <svg class="color_svg" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart-fill" viewBox="0 0 16 16">
                        <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg><br>Զամբյուղ</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row m-2 p-2">
            <div class="col-3">
                <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_mimiso_1306_TV47485.webp" class="img-fluid" alt="#">
            </div>
            <div class="col-3">
                <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/nm_beach.webp" class="img-fluid" alt="#">
            </div>
            <div class="col-3">
                <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_adidas_1306_TV8585696.webp" class="img-fluid" alt="#">
            </div>
            <div class="col-3">
                <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_sokolov_1306_TV859595.webp" class="img-fluid" alt="#">
            </div>
        </div>
        <div class="row m-2 p-2">
            <div class="col-3">
                <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_unison_1306_TV48596.webp" class="img-fluid" alt="#">
            </div>
            <div class="col-3">
                <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_tecno_1306_TV4785966.webp" class="img-fluid" alt="#">
            </div>
            <div class="col-3">
                <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_zagar3884955.webp" class="img-fluid" alt="#">
            </div>
            <div class="col-3">
                <img src="https://static-basket-01.wb.ru/vol1/crm-bnrs/bners1/desk_garden738455.webp" class="img-fluid" alt="#">
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

БЛОГ НА HUSL

Здравствуйте, у меня вопрос по поводу адаптивной вёрстки

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