Skip to content

L
landing_pages
Commit 49adbfd4 by Iren
Options

still add style for max-width 768px

parent fb4c7504
Showing with 24 additions and 18 deletions
css/styles.css
...@@ -800,6 +800,7 @@ video { ...@@ -800,6 +800,7 @@ video {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.option-card-img { .option-card-img {
text-align: center;
width: 275px; width: 275px;
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
...@@ -851,6 +852,7 @@ video { ...@@ -851,6 +852,7 @@ video {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.option-text { .option-text {
margin: 0 auto;
height: 45px; height: 45px;
width: 240px; width: 240px;
} }
...@@ -890,8 +892,8 @@ video { ...@@ -890,8 +892,8 @@ video {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.option-card-img-container img { .option-card-img-container img {
width: 207px; width: 170px;
height: 200px; height: 170px;
} }
} }
@media (max-width: 576px) { @media (max-width: 576px) {
...@@ -924,7 +926,7 @@ video { ...@@ -924,7 +926,7 @@ video {
position: absolute; position: absolute;
width: 2px; width: 2px;
height: 243px; height: 243px;
transform: rotate(15deg); transform: rotate(0deg);
left: 50%; left: 50%;
top: 2%; top: 2%;
} }
...@@ -950,12 +952,7 @@ video { ...@@ -950,12 +952,7 @@ video {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.option-btn { .option-btn {
width: 240px; width: 203px!important;
}
}
@media (max-width: 768px) {
.option-btn {
width: 143px;
height: 34px; height: 34px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -1006,6 +1003,11 @@ video { ...@@ -1006,6 +1003,11 @@ video {
height: 250px; height: 250px;
} }
} }
@media (max-width: 768px) {
.protection-card {
height: 280px;
}
}
@media (max-width: 576px) { @media (max-width: 576px) {
.protection-card { .protection-card {
flex-flow: nowrap; flex-flow: nowrap;
...@@ -1020,6 +1022,7 @@ video { ...@@ -1020,6 +1022,7 @@ video {
@media (max-width: 768px) { @media (max-width: 768px) {
.protection-img { .protection-img {
height: 126px; height: 126px;
margin-left: -10px;
} }
} }
@media (max-width: 576px) { @media (max-width: 576px) {
......
css/styles.less
...@@ -652,6 +652,7 @@ video { ...@@ -652,6 +652,7 @@ video {
text-align: center; text-align: center;
max-width: 485px; max-width: 485px;
@media (max-width: 768px) { @media (max-width: 768px) {
text-align: center;
width: 275px; width: 275px;
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
...@@ -696,6 +697,7 @@ video { ...@@ -696,6 +697,7 @@ video {
.option-text { .option-text {
min-height: 70px; min-height: 70px;
@media (max-width: 768px) { @media (max-width: 768px) {
margin: 0 auto;
height: 45px; height: 45px;
width: 240px; width: 240px;
} }
...@@ -728,8 +730,8 @@ video { ...@@ -728,8 +730,8 @@ video {
} }
img { img {
@media (max-width: 768px) { @media (max-width: 768px) {
width: 207px; width: 170px;
height: 200px; height: 170px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
width: 107px; width: 107px;
...@@ -757,7 +759,7 @@ video { ...@@ -757,7 +759,7 @@ video {
position: absolute; position: absolute;
width: 2px; width: 2px;
height: 243px; height: 243px;
transform: rotate(15deg); transform: rotate(0deg);
left: 50%; left: 50%;
top: 2%; top: 2%;
} }
...@@ -777,10 +779,7 @@ video { ...@@ -777,10 +779,7 @@ video {
margin-bottom: 71px!important; margin-bottom: 71px!important;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
width: 240px; width: 203px!important;
}
@media (max-width: 768px) {
width: 143px;
height: 34px; height: 34px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -822,6 +821,9 @@ video { ...@@ -822,6 +821,9 @@ video {
@media (max-width: 992px) { @media (max-width: 992px) {
height: 250px; height: 250px;
} }
@media (max-width: 768px) {
height: 280px;
}
@media (max-width: 576px) { @media (max-width: 576px) {
flex-flow: nowrap; flex-flow: nowrap;
width: 100%; width: 100%;
...@@ -833,6 +835,7 @@ video { ...@@ -833,6 +835,7 @@ video {
width: 100%; width: 100%;
@media (max-width: 768px) { @media (max-width: 768px) {
height: 126px; height: 126px;
margin-left: -10px;
} }
img { img {
@media (max-width: 576px) { @media (max-width: 576px) {
......
index.html
...@@ -658,7 +658,7 @@ ...@@ -658,7 +658,7 @@
</div> </div>
</section> </section>
<!--
<section class="main-container"> <section class="main-container">
<h2 class="h2-desktop">Цены</h2> <h2 class="h2-desktop">Цены</h2>
<div class="main-line"> <div class="main-line">
...@@ -1076,7 +1076,7 @@ ...@@ -1076,7 +1076,7 @@
</div> </div>
</div> </div>
</section> </section>
-->
<section class="connection"> <section class="connection">
<div class="main-container"> <div class="main-container">
<div class="form-wrapper"> <div class="form-wrapper">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment