Здравствуйте, у меня вопрос по поводу адаптивной вёрстки
Я собираю вёрстку, хочу добавить туда возможность адаптации, это нужно сделать с помощью @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>Источник: Stack Overflow на русском