Hi there,
I am trying to achieve Thumbnails in Mobile.
I have managed to place CSS code to force thumbnails on, however the main image also appears as a thumbnail size. I would like main image to fill frame as per image below it.
I would also like to keep the thumbnails anchored to center as opposed to shifting each time one is clicked.
The page I am working on is https://www.matthewjensen.com.au/work/circuit-emm6e
Current CSS code is:
gallery-reel-item img {left: 0px !important;}
.gallery-reel-item img {
transform: scale(0.77
);
}
/* Reel right arrow */
button.gallery-reel-control-btn[aria-label="Next Slide"]>div {
background-image: url(https://www.flaticon.com/svg/static/icons/svg/709/709586.svg) !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
button.gallery-reel-control-btn[aria-label="Next Slide"]:before {
background: none !important;
}
button.gallery-reel-control-btn[aria-label="Next Slide"]>div>* {
visibility: #8888888;
}
button.gallery-reel-control-btn[aria-label="Previous Slide"]>div {
background-image: url(https://www.flaticon.com/svg/static/icons/svg/709/709586.svg) !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
transform: rotate
}
button.gallery-reel-control-btn[aria-label="Previous Slide"]:before {
background: none !important;
}
button.gallery-reel-control-btn[aria-label="Previous Slide"]>div>* {
visibility: #;
}
button.gallery-reel-control-btn {
background: none;
}
@media screen and (max-width:767px) {
.portfolio-text {
opacity: 1.25 !important;
}
}
/* text color on mobile */
@media screen and (max-width:767px) {
.portfolio-text h3 {
color: white !important;
}
}
@media screen and (max-width:767px) {
}
.gallery-fullscreen-slideshow {
height: 40vh !important;
}
/* Mobile slideshow padding */
@media screen and (max-width:767px) {
.gallery-slideshow {
height: 35vh !important;
}
}
@media screen and (max-width:767px) {
[data-section-id="6139fee9f3582504885a6f71"] .gallery-slideshow-thumbnails {
display: block !important;
}
}
.gallery-slideshow-thumbnails-thumb {
width: 50px;
height: 50px;
}
