TRI-283: edit chatterbox
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user