setting adaptive

This commit is contained in:
Mikola 2024-03-01 09:12:47 +03:00
parent d9781b6396
commit 0b02a71a1a

View File

@ -40,8 +40,7 @@
} }
@media (max-width: 483px) { @media (max-width: 483px) {
max-width: 160px; display: none;
left: -175px;
} }
} }
} }
@ -62,6 +61,20 @@
position: absolute; position: absolute;
top: -100px; top: -100px;
right: 58px; right: 58px;
@media (max-width: 1100px) {
max-width: 100px;
top: -50px;
right: 25px;
}
@media (max-width: 800px) {
display: none;
}
}
@media (max-width: 1100px) {
padding: 20px 25px;
} }
} }
@ -73,12 +86,23 @@
&__head { &__head {
display: flex; display: flex;
margin-bottom: 33px; margin-bottom: 33px;
@media (max-width: 650px) {
flex-direction: column;
row-gap: 10px;
align-items: center;
margin-bottom: 10px;
}
} }
&__suptitle { &__suptitle {
color: #6f6f6f; color: #6f6f6f;
font-size: 14px; font-size: 14px;
margin-right: 70px; margin-right: 70px;
@media (max-width: 650px) {
margin-right: 0;
}
} }
&__steps { &__steps {
@ -102,12 +126,17 @@
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
@media (max-width: 650px) {
text-align: center;
}
} }
&__answers { &__answers {
margin-top: 45px; margin-top: 45px;
display: flex; display: flex;
column-gap: 20px; flex-wrap: wrap;
gap: 20px;
button { button {
border-radius: 12px; border-radius: 12px;
@ -120,8 +149,16 @@
.active { .active {
background: #1458dd; background: #1458dd;
color: whitesmoke; color: whitesmoke;
font-weight: 500; border: 1px solid #1458dd;
border: none; }
@media (max-width: 1100px) {
gap: 10px;
margin-top: 20px;
}
@media (max-width: 450px) {
justify-content: center;
} }
} }
} }
@ -152,6 +189,7 @@
row-gap: 19px; row-gap: 19px;
column-gap: 21px; column-gap: 21px;
margin-bottom: 30px; margin-bottom: 30px;
justify-content: center;
} }
&__item { &__item {