I can only see one product photo on mobile version?

Is there a way to decrease the space between the photo gallery for the product, the product title, and the product details? Just noticed that this code worked, just put a lot of space between those things for the mobile view

Here is the link: https://www.contagionmedia.me/services/photography/p/wedding-photography-by-kbr

4 hours ago, ContagionMedia said:

Is there a way to decrease the space between the photo gallery for the product, the product title, and the product details? Just noticed that this code worked, just put a lot of space between those things for the mobile view

 

Here is the link: https://www.contagionmedia.me/services/photography/p/wedding-photography-by-kbr

 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
figure.ProductItem-gallery {
    height: auto !important;
    padding-bottom: 0 !important;
}
.ProductItem-gallery-thumbnails {
    margin-bottom: 0 !important;
}
.ProductItem .ProductItem-gallery-scroll::after {
    height: 5px;
}
.product-mark {
    margin-bottom: 0 !important;
}
}

Sadly this did not work for me. Any suggestions? On mobile there are no thumbnails and no gallery arrows! 

https://friendsfirstphoto.com/print-shop/p/gallery-prints 

12 hours ago, friendsfirst said:

Sadly this did not work for me. Any suggestions? On mobile there are no thumbnails and no gallery arrows! 

https://friendsfirstphoto.com/print-shop/p/gallery-prints 

Add to Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: black;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;
}
}

On 10/14/2021 at 3:14 AM, tuanphan said:

Add to Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: black;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;
}
}

 

This works for me, how do I make the navigation arrows white, the black ones are hard to see in my use case.

On 10/15/2021 at 10:02 PM, GrahamG said:

This works for me, how do I make the navigation arrows white, the black ones are hard to see in my use case.

you can change text black in the code to white