diff --git a/static/css/moover.css b/static/css/moover.css index e0b2b2b..81d7b13 100644 --- a/static/css/moover.css +++ b/static/css/moover.css @@ -1231,6 +1231,14 @@ b { } } +@media (max-width: 767.98px) { + .chatterbox { + max-width: 100vw; + margin: 0 auto 100px; + position: relative; + } +} + .chatterbox__slider { max-width: 1200px; margin: 0 auto; @@ -1254,6 +1262,21 @@ b { } } +@media (max-width: 767.98px) { + .chatterbox__slider { + width: 720px; + left: 50%; + transform: translateX(-50%); + } +} + +@media (max-width: 479.98px) { + .chatterbox__slider { + width: 830px; + max-width: initial; + } +} + .chatterbox__slide { width: 335px; height: 615px; @@ -1287,6 +1310,14 @@ b { } } +@media (max-width: 767.98px) { + .chatterbox__slide { + width: 234px; + height: 429px; + background-size: 234px 429px; + } +} + .chatterbox__slide.loaded video { opacity: 1; } @@ -1302,6 +1333,13 @@ b { pointer-events: none; } +@media (max-width: 767.98px) { + .chatterbox__slide video { + position: relative; + top: -4px; + } +} + .chatterbox__slide img { position: absolute; scale: 1.32; @@ -1422,6 +1460,20 @@ b { } } +.chatterbox__mbtns { + position: absolute; + top: 58%; + transform: translateY(-50%); + left: 0; + right: 0; +} + +@media (max-width: 479.98px) { + .chatterbox__mbtns { + top: 61%; + } +} + .chatterbox .title { margin-bottom: 60px; } @@ -1451,6 +1503,12 @@ b { } } +@media (max-width: 479.98px) { + .chatterbox .slick-next { + right: 0; + } +} + .chatterbox .slick-prev { left: -40px; } @@ -1470,6 +1528,12 @@ b { } } +@media (max-width: 479.98px) { + .chatterbox .slick-prev { + left: 0; + } +} + @media (max-width: 991.98px) { .chatterbox .slick-list { overflow: visible; @@ -1492,6 +1556,12 @@ b { } } +@media (max-width: 479.98px) { + .slick-slide:not(.slick-center) .chatterbox__slide { + scale: 0.85; + } +} + .slick-center .chatterbox__vbtn { opacity: 1; pointer-events: initial; diff --git a/static/css/moover/chatterbox.css b/static/css/moover/chatterbox.css index aca7637..ae052a9 100644 --- a/static/css/moover/chatterbox.css +++ b/static/css/moover/chatterbox.css @@ -22,6 +22,14 @@ } } +@media (max-width: 767.98px) { + .chatterbox { + max-width: 100vw; + margin: 0 auto 100px; + position: relative; + } +} + .chatterbox__slider { max-width: 1200px; margin: 0 auto; @@ -45,6 +53,21 @@ } } +@media (max-width: 767.98px) { + .chatterbox__slider { + width: 720px; + left: 50%; + transform: translateX(-50%); + } +} + +@media (max-width: 479.98px) { + .chatterbox__slider { + width: 830px; + max-width: initial; + } +} + .chatterbox__slide { width: 335px; height: 615px; @@ -78,6 +101,14 @@ } } +@media (max-width: 767.98px) { + .chatterbox__slide { + width: 234px; + height: 429px; + background-size: 234px 429px; + } +} + .chatterbox__slide.loaded video { opacity: 1; } @@ -93,6 +124,13 @@ pointer-events: none; } +@media (max-width: 767.98px) { + .chatterbox__slide video { + position: relative; + top: -4px; + } +} + .chatterbox__slide img { position: absolute; scale: 1.32; @@ -213,6 +251,20 @@ } } +.chatterbox__mbtns { + position: absolute; + top: 58%; + transform: translateY(-50%); + left: 0; + right: 0; +} + +@media (max-width: 479.98px) { + .chatterbox__mbtns { + top: 61%; + } +} + .chatterbox .title { margin-bottom: 60px; } @@ -242,6 +294,12 @@ } } +@media (max-width: 479.98px) { + .chatterbox .slick-next { + right: 0; + } +} + .chatterbox .slick-prev { left: -40px; } @@ -261,6 +319,12 @@ } } +@media (max-width: 479.98px) { + .chatterbox .slick-prev { + left: 0; + } +} + @media (max-width: 991.98px) { .chatterbox .slick-list { overflow: visible; @@ -283,6 +347,12 @@ } } +@media (max-width: 479.98px) { + .slick-slide:not(.slick-center) .chatterbox__slide { + scale: 0.85; + } +} + .slick-center .chatterbox__vbtn { opacity: 1; pointer-events: initial; diff --git a/styles/moover/chatterbox.scss b/styles/moover/chatterbox.scss index e05e32d..51eac11 100644 --- a/styles/moover/chatterbox.scss +++ b/styles/moover/chatterbox.scss @@ -16,6 +16,12 @@ //max-width: 100vw; } + @media (max-width: 767.98px) { + max-width: 100vw; + margin: 0 auto 100px; + position: relative; + } + &__slider { max-width: 1200px; margin: 0 auto; @@ -31,7 +37,18 @@ @media (max-width: 991.98px) { max-width: 720px; //position: relative; + } + @media (max-width: 767.98px) { + width: 720px; + left: 50%; + transform: translateX(-50%); + //position: relative; + } + + @media (max-width: 479.98px) { + width: 830px; + max-width: initial; } } @@ -61,6 +78,12 @@ background-size: 206px 377px; } + @media (max-width: 767.98px) { + width: 234px; + height: 429px; + background-size: 234px 429px; + } + &.loaded { video { opacity: 1; @@ -76,6 +99,11 @@ opacity: 0; transition: opacity 0.2s ease-in-out; pointer-events: none; + + @media (max-width: 767.98px) { + position: relative; + top: -4px; + } } img { @@ -185,6 +213,18 @@ } } + &__mbtns { + position: absolute; + top: 58%; + transform: translateY(-50%); + left: 0; + right: 0; + + @media (max-width: 479.98px) { + top: 61%; + } + } + .title { margin-bottom: 60px; @@ -206,6 +246,10 @@ background-size: 32%; right: 5%; } + + @media (max-width: 479.98px) { + right: 0; + } } .slick-prev { @@ -221,6 +265,10 @@ background-size: 32%; left: 5%; } + + @media (max-width: 479.98px) { + left: 0; + } } .slick-list { @@ -241,6 +289,10 @@ @media (max-width: 991.98px) { scale: 0.8; } + + @media (max-width: 479.98px) { + scale: 0.85; + } } .slick-center { diff --git a/templates/pages/p_mover_landing_page.html b/templates/pages/p_mover_landing_page.html index bd8b3d2..d904e72 100644 --- a/templates/pages/p_mover_landing_page.html +++ b/templates/pages/p_mover_landing_page.html @@ -264,6 +264,8 @@ {% endfor %} +
+