Как адаптировать этот код под разрешения?
я не совсем понимаю как мне адаптировать свой код, когда у меня в полноэкранном режиме, то все выглядит нормально, но когда я перехожу в режим "окно" наполнение сайта не адаптируется под данное окно, также при открытии сайта на другом устройстве с другим разрешением экрана, сайт также не адаптируется под это разрешение. Я немного решил проблему, добавив горизонтальный ползунок, но хотелось бы, чтобы сайт адаптировался под разрешения, без использования этого ползунка, может я не правильно использую медиа-запрос или что-то другое. Вот сам код:
* {
box-sizing: border-box;
}
body {
overflow-x:hidden;
font-size: 16px; /* Базовый размер шрифта */
}
@media only screen and (max-width: 1500px) {
main {
right:100px;
font-size:14px;
}
.v40_1191{
word-wrap: normal;
}
.v40_1192{
word-wrap: normal;
}
}
@media only screen and (max-width: 1500px) {
body {
font-size:12px;
overflow-x:scroll ;
}
.v40_1191{
word-wrap: normal;
}
.v40_1192{
word-wrap: normal;
}
}
main{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.v40_1181 {
width: 100%;
height: 50vh;
background: url("../images/v40_1181.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: relative;
z-index: 1000;
overflow: hidden;
}
.v40_1182 {
width: 180px;
color: rgba(255,255,255,1);
position: absolute;
top: 336px;
left: 750px;
font-family: Montserrat;
font-weight: Bold;
font-size: 61px;
opacity: 1;
text-align: center;
}
.v40_1191 {
width: 1450px;
height: 526px;
background: url("../images/v40_1191.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 908px;
left: 70px;
overflow: hidden;
}
.v40_1192 {
width: 1450px;
height: 526px;
background: url("../images/v40_1192.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.v40_1193 {
width: 375px;
color: rgba(54,110,182,1);
position: absolute;
top: 0px;
left: 535px;
font-family: Montserrat;
font-weight: Bold;
font-size: 48px;
opacity: 1;
text-align: center;
}
.v40_1194 {
width: 492px;
height: 455px;
background: url("../images/v40_1194.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 90px;
left: -72px;
overflow: hidden;
}
.v40_1195 {
width: 492px;
height: 455px;
background: rgba(235,233,233,1);
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
box-shadow: 2.625px 3.5px 4px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.v40_1196 {
width: 347px;
color: rgba(0,0,0,1);
position: absolute;
top: 214px;
left:72px;
font-family: Segoe UI;
font-weight: Semibold;
font-size: 21px;
opacity: 1;
text-align: left;
}
.v40_1197 {
width: 1450px;
color: rgba(0,0,0,1);
position: absolute;
top: 91px;
left: 515px;
font-family: Montserrat;
font-weight: Regular;
font-size: 18px;
opacity: 1;
text-align: left;
}
.v40_2222{
width: 1450px;
color: rgba(0,0,0,1);
position: absolute;
top: 86px;
left: 0px;
font-family: Montserrat;
font-weight: Regular;
font-size: 18px;
opacity: 1;
text-align: left;
}
.v40_1198 {
width: 1450px;
color: rgba(0,0,0,1);
position: absolute;
top: 290px;
left: 515px;
font-family: Montserrat;
font-weight: Regular;
font-size: 18px;
opacity: 1;
text-align: left;
}
.v40_1111{
width: 863px;
color: rgba(0,0,0,1);
font-family: Montserrat;
font-weight: Regular;
font-size: 17px;
opacity: 1;
text-align: left;
top:285px;
left:0px;
}
.v40_1199 {
width: 1450px;
height: 751px;
background: url("../images/v40_1199.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 1540px;
left: 60px;
overflow: hidden;
}
.v40_1200 {
width: 100%;
height: 674px;
background: url("../images/v40_1200.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 81px;
left: 0px;
overflow: hidden;
}
.v40_1201 {
width: 100%;
color: rgba(0,0,0,1);
position: relative;
top: 0px;
left: 0px;
font-family: Montserrat;
font-weight: SemiBold;
font-size: 26px;
opacity: 1;
text-align: left;
}
.v40_1202 {
font-family: Montserrat;
width: 100%;
color: rgba(0,0,0,1);
position: absolute;
font-size: 20px;
top: 100px;
left:0px;
opacity: 1;
text-align: left;
}
.Let{
width:100%;
color:rgba(0,0,0,1);
font-size:26px;
}
.v40_1203 {
font-family: Montserrat;
font-size: 20px;
width: 100%;
color: rgba(0,0,0,1);
position: absolute;
top: 197px;
left: 0px;
opacity: 1;
text-align: left;
}
.v40_1204 {
font-size: 20px;
font-family: Montserrat;
width: 100%;
color: rgba(0,0,0,1);
position: absolute;
top: 296px;
left: 0px;
opacity: 1;
text-align: left;
}
.v40_1205 {
font-size: 20px;
font-family: Montserrat;
width: 100%;
color: rgba(0,0,0,1);
position: absolute;
top: 396px;
left: 0px;
opacity: 1;
text-align: left;
}
.v40_1206 {
font-size: 20px;
font-family: Montserrat;
width: 100%;
color: rgba(0,0,0,1);
position: absolute;
top: 496px;
left: 0px;
opacity: 1;
text-align: left;
}
.v40_1207 {
font-size: 20px;
font-family: Montserrat;
width: 100%;
color: rgba(0,0,0,1);
position: absolute;
top: 595px;
left: 0px;
opacity: 1;
text-align: left;
}
.v40_1208 {
width: 367px;
color: rgba(54,110,182,1);
position: absolute;
top: 0px;
left: 542px;
font-weight: Bold;
font-size: 48px;
opacity: 1;
text-align: left;
}
.v40_1209 {
width: 239px;
height: 27px;
background: url("../images/v40_1209.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 34px;
left: 184px;
overflow: hidden;
}
.v40_1210 {
width: 85px;
height: 45px;
background: rgba(4,74,164,1);
opacity: 1;
position: absolute;
top: 25px;
left: 1410px;
border-top-left-radius: 17px;
border-top-right-radius: 17px;
border-bottom-left-radius: 17px;
border-bottom-right-radius: 17px;
overflow: hidden;
}
.v40_1211 {
width: 27px;
height: 19px;
background: url("../images/v40_1211.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 13px;
left: 35px;
overflow: hidden;
}
.v40_1212 {
width: 21px;
color: rgba(255,255,255,1);
position: absolute;
top: 1px;
left: 7px;
font-family: Segoe UI;
font-weight: Regular;
font-size: 14px;
opacity: 1;
text-align: left;
}
.v40_1213 {
width: 9px;
height: 5px;
background: url("../images/v40_1213.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 7px;
left: 35px;
overflow: hidden;
}
.v40_1214 {
width: 9px;
height: 4px;
background: rgba(255,255,255,1);
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
}
.v40_1215 {
width: 19px;
height: 10px;
background: url("../images/v40_1215.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 18px;
left: 8px;
overflow: hidden;
}
.v40_1216 {
width: 19px;
height: 5px;
background: rgba(245,245,245,1);
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.v40_1217 {
width: 19px;
height: 5px;
background: rgba(255,0,0,1);
opacity: 1;
position: absolute;
top: 5px;
left: 0px;
overflow: hidden;
}
.v40_1247 {
width: 1680px;
height: 218px;
background: url("../images/v40_1247.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 2396px;
left: 0px;
overflow: hidden;
}
.v40_1248 {
width: 1680px;
height: 218px;
background: rgba(244,244,244,1);
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.v40_1249 {
width: 17px;
height: 17px;
background: rgba(255,255,255,1);
opacity: 1;
position: absolute;
top: 162px;
left: 665px;
overflow: hidden;
}
.v40_1250 {
width: 17px;
height: 17px;
background: url("../images/v40_1250.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.v40_1251 {
width: 17px;
height: 17px;
background: url("../images/v40_1251.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.v40_1252 {
width: 17px;
height: 17px;
background: url("../images/v40_1252.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.v40_1253 {
width: 17px;
height: 17px;
background: rgba(46,46,46,1);
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
}
.v40_1254 {
width: 10px;
height: 10px;
background: url("../images/v40_1254.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 3px;
left: 4px;
overflow: hidden;
}
.v40_1255 {
width: 10px;
height: 10px;
background: rgba(255,255,255,1);
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
}
.v40_1256 {
width: 5px;
height: 5px;
background: rgba(255,255,255,1);
opacity: 1;
position: absolute;
top: 2px;
left: 3px;
}
.v40_1257 {
width: 17px;
height: 17px;
background: rgba(255,255,255,1);
opacity: 1;
position: absolute;
top: 127px;
left: 665px;
overflow: hidden;
}
.v40_1258 {
width: 17px;
height: 17px;
background: url("../images/v40_1258.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.v40_1259 {
width: 17px;
height: 17px;
background: url("../images/v40_1259.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.v40_1260 {
width: 17px;
height: 17px;
background: url("../images/v40_1260.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.v40_1261 {
width: 8px;
height: 9px;
background: rgba(46,46,46,1);
opacity: 1;
position: absolute;
top: 4px;
left: 5px;
}
.v40_1262 {
width: 17px;
height: 17px;
background: rgba(46,46,46,1);
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
}
.v40_1263 {
width: 129px;
color: rgba(0,0,0,1);
position: absolute;
top: 94px;
left: 692px;
font-family: Montserrat;
font-weight: Regular;
font-size: 13px;
opacity: 1;
text-align: left;
}
.v40_1264 {
width: 102px;
color: rgba(0,0,0,1);
position: absolute;
top: 129px;
left: 692px;
font-family: Montserrat;
font-weight: Regular;
font-size: 13px;
opacity: 1;
text-align: left;
}
.v40_1265 {
width: 102px;
color: rgba(0,0,0,1);
position: absolute;
top: 164px;
left: 692px;
font-family: Montserrat;
font-weight: Regular;
font-size: 13px;
opacity: 1;
text-align: left;
}
.v40_1266 {
width: 77px;
color: rgba(0,0,0,1);
position: absolute;
top: 59px;
left: 665px;
font-family: Montserrat;
font-weight: Regular;
font-size: 15px;
opacity: 1;
text-align: left;
}
.v40_1267 {
width: 227px;
color: rgba(0,0,0,1);
position: absolute;
top: 59px;
left: 1069px;
font-family: Montserrat;
font-weight: Regular;
font-size: 15px;
opacity: 1;
text-align: left;
}
.v40_1268 {
width: 262px;
height: 29px;
background: url("../images/v40_1268.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 52px;
left: 140px;
overflow: hidden;
}
.v40_1269 {
width: 17px;
height: 17px;
background: rgba(249,193,50,1);
opacity: 1;
position: absolute;
top: 92px;
left: 665px;
overflow: hidden;
}
.v40_1270 {
width: 17px;
height: 12px;
background: rgba(46,46,46,1);
opacity: 1;
position: absolute;
top: 2px;
left: 0px;
}
.v40_1271 {
width: 262px;
color: rgba(0,0,0,1);
position: absolute;
top: 104px;
left: 140px;
font-family: Montserrat;
font-weight: Regular;
font-size: 15px;
opacity: 1;
text-align: left;
}
.v40_1272 {
width: 24px;
height: 24px;
background: rgba(46,46,46,1);
opacity: 1;
position: absolute;
top: 88px;
left: 1106px;
border-top-left-radius: 8749px;
border-top-right-radius: 8749px;
border-bottom-left-radius: 8749px;
border-bottom-right-radius: 8749px;
overflow: hidden;
}
.v40_1273 {
width: 7px;
height: 13px;
background: url("../images/v40_1273.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 5px;
left: 9px;
overflow: hidden;
}
.v40_1274 {
width: 6px;
height: 13px;
background: rgba(237,237,237,1);
opacity: 1;
position: absolute;
top: 0px;
left: 1px;
}
.v40_1275 {
width: 24px;
height: 24px;
background: rgba(46,46,46,1);
opacity: 1;
position: absolute;
top: 88px;
left: 1069px;
border-top-left-radius: 8749px;
border-top-right-radius: 8749px;
border-bottom-left-radius: 8749px;
border-bottom-right-radius: 8749px;
overflow: hidden;
}
.v40_1276 {
width: 17px;
height: 15px;
background: url("../images/v40_1276.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 4px;
left: 4px;
overflow: hidden;
}
.v40_1277 {
width: 11px;
height: 11px;
background: rgba(237,237,237,1);
opacity: 1;
position: absolute;
top: 1px;
left: 3px;
}
.v40_1398 {
display: flex;
flex-shrink: 8;
width: 100%;
height: 20px;
background: url("../images/v40_1398.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 39px;
left: 768px;
overflow: hidden;
}
.v40_1399 {
width: 104px;
color: rgba(0,0,0,1);
position: absolute;
top: 0px;
left: 127px;
font-family: Montserrat;
font-weight: Regular;
font-size: 14px;
opacity: 1;
text-align: left;
}
.v40_1400 {
display: flex;
flex-shrink: 8;
width: 100%;
height: 20px;
background: url("../images/v40_1400.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
}
.v40_1401 {
display: flex;
flex-shrink: 8;
width: 48px;
color: rgba(0,0,0,1);
position: absolute;
top: 0px;
left: 0px;
font-family: Montserrat;
font-weight: Regular;
font-size: 14px;
opacity: 1;
text-align: left;
}
.v40_1403 {
display: flex;
flex-shrink: 8;
width: 104px;
color: rgba(0,0,0,1);
position: absolute;
top: 0px;
left: 127px;
font-family: Montserrat;
font-weight: Regular;
font-size: 14px;
opacity: 1;
text-align: left;
}
.v40_1404 {
display: flex;
flex-shrink: 8;
width: 81px;
color: rgba(0,0,0,1);
position: absolute;
top: 0px;
left: 309px;
font-family: Montserrat;
font-weight: Regular;
font-size: 14px;
opacity: 1;
text-align: left;
}
.v40_1405 {
display: flex;
flex-shrink: 8;
width: 68px;
color: rgba(0,0,0,1);
position: absolute;
top: 0px;
left: 469px;
font-family: Montserrat;
font-weight: Regular;
font-size: 14px;
opacity: 1;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="./MW2.css" rel="stylesheet" />
<title>MW</title>
</head>
<body>
<main>
<div class="v40_1181">
<span class="v40_1182">O nas</span>
</div>
<div class="v40_1191">
<div class="v40_1192">
<span class="v40_1193">Nasza historia</span>
<div class="v40_1194">
<div class="v40_1195">
</div>
<span class="v40_1196">Photo of someone from company</span>
</div>
<span class="v40_1197">Witamy w MW-Grains, zaufanym przewodniku po świecie wysokiej jakości produktów <br> spożywczych. Od 2000 roku staliśmy się symbolem niezawodności i jakości w handlu, a dziś z <br> dumą świętujemy 20. rok naszej udanej działalności.<br>
<span class="v40_2222">Nasza historia rozpoczęła się w 2000 roku, kiedy zrealizowaliśmy naszą pierwszą transakcję. <br> Ten ważny moment był punktem wyjścia naszej podróży w świecie żywności. Tego dnia, w omszałym <br> biurze, zawarliśmy pierwszą umowę, która stała się fundamentem do zbudowania naszej firmy.<br><br><br></span></span>
<span class="v40_1198">Ta pierwsza transakcja nie była tylko wymianą produktów - była to wymiana pomysłów, wartości i <br> aspiracji do stworzenia czegoś wyjątkowego. Włożyliśmy w to nie tylko nasz produkt, ale także <br> kawałek naszej duszy, wnosząc kreatywność i zaangażowanie w doskonałość na każdym kroku.<br><br>
<span class="v40_1111">Od tego czasu MW-Grains stała się nie tylko firmą, ale rodziną zjednoczoną wspólnym celem, jakim <br> jest dostarczanie naszym klientom produktów o wyjątkowej jakości. Staliśmy się organizacją z <br> ogromnym doświadczeniem handlowym i każdego dnia uczymy się i rozwijamy, aby oferować <br> klientom to, co najlepsze w świecie żywności.</span></span>
</div>
</div>
<div class="v40_1199">
<div class="v40_1200">
<span class="v40_1201">Zaufaj doświadczeniu, jakości i dbałości o szczegóły - wybierz współpracę z MW-Grains. Nie jesteśmy tylko <br>firmą, jesteśmy standardem doskonałości w świecie żywności i dlatego nie będziesz chciał przegapić okazji<br> do współpracy z nami:</span>
<span class="v40_1202"><span class="Let">20 lat udanej działalności:</span><br>
"MW-Grains jest dumny ze swojego 20-letniego doświadczenia w handlu żywnością. To stuletnie doświadczenie stało się naszym głównym atutem, gwarancją współpracy z wiarygodnym i dojrzałym partnerem.</span>
<span class="v40_1203"><span>Szeroka gama produktów:</span><br>
Nasz katalog produktów reprezentuje różnorodność smaków i jakości. Od świeżego oleju słonecznikowego po delikatną mąkę pszenną i krystalicznie czysty cukier - oferujemy produkty dla najbardziej wyrafinowanych gustów.</span>
<span class="v40_1204"><span>Kreatywne podejście do biznesu:</span><br>
Nie jesteśmy zwykłymi sprzedawcami, jesteśmy twórcami pysznych chwil. Nasze kreatywne podejście do biznesu nadaje każdemu <br> produktowi unikalny charakter i rozpoznawalny styl, dzięki czemu współpraca z nami jest wyjątkowym doświadczeniem.</span>
<span class="v40_1205"><span>Zaufane relacje:</span><br>
"MW-Grains" buduje nie tylko transakcje biznesowe, ale także długoterminowe relacje. Cenimy każdego klienta, jesteśmy gotowi uważnie wysłuchać jego potrzeb i dostosować się do jego wymagań.</span>
<span class="v40_1206"><span>Najwyższy standard jakości:</span><br>
Nasza firma jest dostawcą najwyższej klasy produktów. Śledzimy każdy etap produkcji, aby mieć pewność, że każdy produkt, który do Ciebie trafia, spełnia nasze standardy jakości.</span>
<span class="v40_1207"><span>Innowacja i wzrost:</span><br>
"MW-Grains nieustannie poszukuje nowych możliwości i innowacji w świecie żywności. Współpraca z nami oznacza, że zawsze jesteś o krok<br> do przodu, gotowy zaoferować swoim klientom coś wyjątkowego i istotnego".</span>
</div>
<span class="v40_1208">Kim jesteśmy?</span>
</div>
<div class="v40_1209">
</div>
<div class="v40_1210">
<div class="v40_1211">
<span class="v40_1212">PL</span>
<div class="v40_1213">
<div class="v40_1214">
</div>
</div>
</div>
<div class="v40_1215">
<div class="v40_1216">
</div>
<div class="v40_1217">
</div>
</div>
</div>
<div class="v40_1247">
<div class="v40_1248">
</div>
<div class="v40_1249">
<div class="v40_1250">
<div class="v40_1251">
<div class="v40_1252">
<div class="v40_1253">
</div>
<div class="v40_1254">
<div class="v40_1255">
</div>
<div class="v40_1256">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="v40_1257">
<div class="v40_1258">
<div class="v40_1259">
<div class="v40_1260">
<div class="v40_1261">
</div>
<div class="v40_1262">
</div>
</div>
</div>
</div>
</div>
<span class="v40_1263">[email protected]</span>
<span class="v40_1264">+48 535 251 380</span>
<span class="v40_1265">+48 535 251 380</span>
<span class="v40_1266">KONTAKT</span>
<span class="v40_1267">MEDIA SPOŁECZNOŚCIOWE</span>
<div class="v40_1268">
</div>
<div class="v40_1269">
<div class="v40_1270">
</div>
</div>
<span class="v40_1271">Adres: ul. Aleja Jerozolimskia 89/43, 02-001 Warszawa, Polska</span>
<div class="v40_1272">
<div class="v40_1273">
<div class="v40_1274">
</div>
</div>
</div>
<div class="v40_1275">
<div class="v40_1276">
<div class="v40_1277">
</div>
</div>
</div>
</div>
<div class="v40_1398">
<div class="v40_1400">
<span class="v40_1401">O nas</span>
<span class="v40_1403">działalność</span>
<span class="v40_1404">produkty</span>
<span class="v40_1405">KONtakt</span>
</div>
</div>
</div>
</main>
</body>
</html>