Skip to content

L
landing_pages
Commit 13b7097d by Iren
Options

add style for max-widht 576px for section advertising

parent c3450953
Showing with 170 additions and 121 deletions
css/styles.css
......@@ -562,6 +562,12 @@ video {
max-width: 850px;
margin-bottom: 40px;
}
@media (max-width: 768px) {
.text-h2-desktop {
font-size: 14px;
letter-spacing: 0.14px;
}
}
@media (max-width: 576px) {
.text-h2-desktop {
font-family: SFUIDisplay-Light;
......@@ -573,12 +579,6 @@ video {
margin-bottom: 31px;
}
}
@media (max-width: 768px) {
.text-h2-desktop {
font-size: 14px;
letter-spacing: 0.14px;
}
}
.h2-desktop-tittle {
font-family: SF-UI-Display-Black;
font-weight: 800;
......@@ -774,7 +774,7 @@ video {
@media (max-width: 576px) {
.advertising-background {
padding-bottom: 0;
padding-top: 90px;
padding-top: 55px;
}
}
.advertising {
......@@ -802,12 +802,19 @@ video {
@media (max-width: 576px) {
.advertising {
flex-flow: wrap;
height: auto;
margin-bottom: 1px;
}
}
.two-img {
margin-bottom: 238px;
position: relative;
}
@media (max-width: 576px) {
.two-img {
margin-bottom: 10px;
}
}
.advertising-img-position {
position: absolute;
width: 674px;
......@@ -835,6 +842,19 @@ video {
right: 290px;
}
}
@media (max-width: 576px) {
.advertising-img-position {
width: 290px;
height: 162px;
right: 55px;
top: 340px;
}
}
@media (max-width: 576px) {
.advertising-text-p {
margin-bottom: 0;
}
}
.advertising-text-order {
width: 110%;
}
......@@ -845,29 +865,13 @@ video {
}
}
.advertising-text-order h2 {
font-family: SF-UI-Display-Black;
font-size: 36px;
line-height: 62px;
margin-bottom: 3px;
color: #315197;
letter-spacing: 0.36px;
max-width: 803px;
/*.h2-desktop;*/
font-family: SFUIDisplay-Regular;
margin-bottom: 21px;
margin-top: 8px;
line-height: 36px;
font-weight: 800;
}
@media (max-width: 576px) {
.advertising-text-order h2 {
font-size: 24px;
line-height: 30px;
margin-bottom: 3px;
letter-spacing: 0.24px;
max-width: 250px;
margin-top: 20px;
}
}
@media (max-width: 768px) {
.advertising-text-order h2 {
font-size: 30px;
......@@ -876,40 +880,28 @@ video {
}
@media (max-width: 576px) {
.advertising-text-order h2 {
font-family: SFUIDisplay-Regular;
font-size: 24px;
width: 300px!important;
font-weight: 700;
letter-spacing: 0;
color: #303a81;
line-height: 24px;
margin-bottom: 15px;
height: auto;
}
}
.advertising-text {
width: 110%;
}
.advertising-text h2 {
font-family: SF-UI-Display-Black;
font-size: 36px;
font-weight: 800;
line-height: 62px;
margin-bottom: 3px;
color: #315197;
letter-spacing: 0.36px;
max-width: 803px;
/*.h2-desktop;*/
font-family: SFUIDisplay-Regular;
font-weight: 700;
margin-bottom: 21px;
margin-top: 4px;
line-height: 36px;
}
@media (max-width: 576px) {
.advertising-text h2 {
font-size: 24px;
line-height: 30px;
margin-bottom: 3px;
letter-spacing: 0.24px;
max-width: 250px;
margin-top: 20px;
}
}
@media (max-width: 768px) {
.advertising-text h2 {
font-size: 30px;
......@@ -918,10 +910,15 @@ video {
}
@media (max-width: 576px) {
.advertising-text h2 {
font-family: SFUIDisplay-Regular;
font-size: 24px;
width: 300px!important;
font-weight: 700;
letter-spacing: 0;
color: #303a81;
line-height: 24px;
margin-bottom: 15px;
height: auto;
}
}
.advertising-text .main-line {
......@@ -943,6 +940,17 @@ video {
position: relative;
z-index: 3;
}
@media (min-height: 577px) {
.advertising-img-order {
width: 120%;
padding-top: 0;
margin-top: 0;
}
.advertising-img-order img {
width: 100%;
margin-bottom: 70px;
}
}
@media (max-width: 576px) {
.advertising-img-order {
min-width: 300px;
......@@ -951,20 +959,16 @@ video {
.advertising-img-order img {
min-width: 300px;
margin-left: -25px;
height: 190px;
}
}
@media (min-height: 577px) {
@media (max-width: 1250px) {
.advertising-img-order {
margin-top: -65px;
width: 120%;
padding-top: 0;
}
.advertising-img-order img {
width: 100%;
padding-top: 25px;
}
}
@media (max-width: 1250px) {
.advertising-img-order {
.advertising-img {
padding-top: 25px;
}
}
......@@ -976,22 +980,20 @@ video {
}
.advertising-img img {
width: 100%;
margin-bottom: 70px;
}
}
@media (max-width: 576px) {
.advertising-img {
min-width: 300px;
margin-top: 0;
}
.advertising-img img {
min-width: 320px;
height: 190px;
margin-left: -25px;
}
}
@media (max-width: 1250px) {
.advertising-img {
padding-top: 25px;
}
}
/*option*/
.option h2 {
font-size: 36px;
......
css/styles.less
......@@ -476,6 +476,10 @@ video {
letter-spacing: 0.18px;
max-width: 850px;
margin-bottom: 40px;
@media (max-width: 768px){
font-size: 14px;
letter-spacing: 0.14px;
}
@media (max-width: 576px) {
font-family: SFUIDisplay-Light;
font-size: 14px;
......@@ -485,10 +489,6 @@ video {
letter-spacing: 0.14px;
margin-bottom: 31px;
}
@media (max-width: 768px){
font-size: 14px;
letter-spacing: 0.14px;
}
}
.h2-desktop-tittle {
font-family: SF-UI-Display-Black;
......@@ -553,24 +553,24 @@ video {
}
}
.h2-main {
@media (max-width: 576px) {
@media (max-width: 576px) {
width: 200px;
margin-bottom: 12px;
margin-bottom: 12px;
}
}
.h3-main {
@media (max-width: 576px) {
margin-bottom: 14px;
@media (max-width: 576px) {
margin-bottom: 14px;
}
}
.main-line-margin {
@media (max-width: 576px) {
margin-bottom: 15px;
margin-bottom: 15px;
}
}
.text-h2-desktop-main {
@media (max-width: 576px) {
margin-bottom: 40px;
@media (max-width: 576px) {
margin-bottom: 40px;
}
}
.main-card {
......@@ -618,8 +618,8 @@ video {
@media (max-width: 992px) {
margin-top: 130px;
}
@media (max-width: 576px) {
margin-top: 15px!important;
@media (max-width: 576px) {
margin-top: 15px!important;
}
}
/*advertising*/
......@@ -653,7 +653,7 @@ video {
}
@media (max-width: 576px) {
padding-bottom: 0;
padding-top: 90px;
padding-top: 55px;
}
}
.advertising {
......@@ -673,12 +673,17 @@ video {
}
@media (max-width: 576px) {
flex-flow: wrap;
height: auto;
margin-bottom: 1px;
}
}
.two-img {
margin-bottom: 238px;
position: relative;
@media (max-width: 576px) {
margin-bottom: 10px;
}
}
.advertising-img-position {
position: absolute;
......@@ -700,6 +705,17 @@ video {
height: 172px;
right: 290px;
}
@media (max-width: 576px) {
width: 290px;
height: 162px;
right: 55px;
top: 340px;
}
}
.advertising-text-p {
@media (max-width: 576px) {
margin-bottom: 0;
}
}
.advertising-text-order {
@media (max-width: 576px) {
......@@ -708,7 +724,7 @@ video {
}
width: 110%;
h2 {
.h2-desktop;
/*.h2-desktop;*/
font-family: SFUIDisplay-Regular;
margin-bottom: 21px;
margin-top: 8px;
......@@ -719,10 +735,15 @@ video {
margin-bottom: 15px;
}
@media (max-width: 576px) {
font-family: SFUIDisplay-Regular;
font-size: 24px;
width: 300px!important;
font-weight: 700;
letter-spacing: 0;
color: #303a81;
line-height: 24px;
margin-bottom: 15px;
height: auto;
}
}
......@@ -732,7 +753,7 @@ video {
.advertising-text {
width: 110%;
h2 {
.h2-desktop;
/*.h2-desktop;*/
font-family: SFUIDisplay-Regular;
font-weight: 700;
margin-bottom: 21px;
......@@ -742,11 +763,16 @@ video {
font-size: 30px;
margin-bottom: 15px;
}
@media (max-width: 576px) {
@media (max-width: 576px) {
font-family: SFUIDisplay-Regular;
font-size: 24px;
width: 300px!important;
font-weight: 700;
letter-spacing: 0;
color: #303a81;
line-height: 24px;
margin-bottom: 15px;
height: auto;
}
}
......@@ -768,20 +794,24 @@ video {
position: relative;
z-index: 3;
}
@media (min-height: 577px) {
width: 120%;
padding-top: 0;
margin-top: 0;
img {
width: 100%;
margin-bottom: 70px;
}
}
@media (max-width: 576px) {
min-width: 300px;
order: 5;
img {
min-width: 300px;
margin-left: -25px;
}
}
@media (min-height: 577px) {
margin-top: -65px;
width: 120%;
padding-top: 0;
img {
width: 100%;
height: 190px;
}
}
@media (max-width: 1250px) {
......@@ -789,24 +819,28 @@ video {
}
}
.advertising-img {
@media (max-width: 1250px) {
padding-top: 25px;
}
@media (min-height: 577px) {
margin-top: -65px;
width: 120%;
padding-top: 0;
img {
width: 100%;
margin-bottom: 70px;
}
}
@media (max-width: 576px) {
min-width: 300px;
margin-top: 0;
img {
min-width: 320px;
height: 190px;
margin-left: -25px;
}
}
@media (max-width: 1250px) {
padding-top: 25px;
}
}
/*option*/
.option {
......
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