Как адаптировать сайт под разные разрешения?

Question

Как мне правильно адаптировать данный код на разные разрешения, хотя бы для разных разрешений монитора? Заранее простите за возможную неправильную формулировку вопроса.

.MW_1{
    position: absolute;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    width:100%;
    font-family: Montserrat;
    z-index:1000;
}
ul{
    display: inline-block;
    list-style-type: none;
}
.flour, .sugar, .oil, .soon{
    width: 50px;
    
}
.MW_1{
    width: 100%;
    height: 2317px;
}
.list1 li{
    display: inline-block;
}
.menu{
    width: 100%;
    height: 50px;
    text-align: center;
    padding-top: 15px;
}
.cont{
    padding-left: 67px;
}
.pro{
    padding-left: 67px;
}
.dz{
    padding-left: 67px;
}
.us{
    padding-left: 550px;
}
.MW_GRAINS_1{
    padding-left: 50px;
}
.partner{
    position: absolute;
    width: 100%;
    height: 600px;
    background-color: #044AA4;
    margin-top: 85px;
}
.first_words{
    font-weight: 700;
}
.words{
    position: absolute;
    width: 632px;
    height: 254px;
    color:white;
    font-size: 52px;
    font-weight: 500;
    text-align: left;
    padding-left: 850px;
    padding-top: 120px;
}
.group{
    position: absolute;
    text-align: left;
    margin-top: 50px;
    margin-left: 200px;
}
.tractor{
    position: absolute;
    border-radius: 50%;
    border-width: 5px;
    border-style: solid;
    border-color: #044AA4;
    margin-top: 320px;
    margin-left: 450px;
}
.second_words{
    position: absolute;
    width: 150px;
    height: 56px;
    color:black;
    background-color: white;
    border-radius: 10px;
    font-size: 13px;
}
.edit{
    position: absolute;
    margin-left: 10px;
    margin-top: 18px;
    font-size: 15px;
}
.photo_1{
    position: relative;
    text-align: center;
    width: 100%;
    top: 270px;
    left: 70px;
}
.title{
    position: absolute;
    top:265px;
    right:500px;
    color:white;
    font-size: 30px;
    font-weight: 700;
    line-height: 22px;
    word-wrap: break-word;
}

<!DOCTYPE html>
<html>
    <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
    <link href="./Untilted-1.css" rel="stylesheet" />
    <link href="./Untilted-3.css" rel="stylesheet" />
    <meta name="viewport" content="1160">
    <title>MW</title>
</head>
<body>
  <div class="MW_1">
    <div class="menu">
        <img src="./MW_GRAINS 2.png" class="MW_GRAINS_1" >
        <ul class="list1">
          <li class="us">O nas</li>
          <li class="dz">Działalność</li>
          <li class="pro">Produkty</li>
          <li class="cont">Kontakt</li>
        </ul>
    </div>
    <div class="partner">
      <span class="words"><div class="first_words">TWÓJ <br> NIEZAWODNY <br> PARTNER BIZNSOWY <br><br></div> <div class="second_words"><span class="edit">DZIAŁALNOŚĆ ➜</span></div></span>
      <img src="./Mask group.png" class="group" width="400">
      <img src="./tractor.png" class="tractor" width="180">
    </div>
    <div class="product">
      <div class="photo_1">
        <img src="./Picture.png" class="grass">
        <span class="title">NASZE PRODUKTY</span>
      </div>
    </div>
  </div>

БЛОГ НА HUSL

Как адаптировать сайт под разные разрешения?

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