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

Quote

@media screen and (max-width:767px) {
.ProductItem-gallery-thumbnails {
    display: flex;
}
.ProductItem-gallery {
    flex-direction: column-reverse;
}
.ProductItem-gallery-slides {
    width: 100%;
}
}

@media screen and (max-width:767px) {
.ProductItem-gallery-scroll {
    display: block !important;
}
figure.ProductItem-gallery {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
}
figure.ProductItem-gallery>div {
    width: 100% !important;
}
.ProductItem-gallery-thumbnails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
}

So this is what I have added and it kinda works but its making my products have a pretty big padded area between the product and title. Can you help?

1 hour ago, earthlyborn said:

So this is what I have added and it kinda works but its making my products have a pretty big padded area between the product and title. Can you help?

I actually was able to find one of your codes from Sep and fix it! Thank you so much! I do have one more unrelated question possibly you are able to help with!
Am I able to make the search bar on the website show photos of what I am searching for instead of strange text?

1 hour ago, earthlyborn said:

Am I able to make the search bar on the website show photos of what I am searching for instead of strange text?

Search will only find/show images if you the image names contain the words you are searching for, and if you are searching the entire site - not a specific collection.

Hello, I am trying to change the mobile version of the product gallery into a carosel with a visible slideshow/thumbnail. I used the following code, but on some of the products the slideshow "freezes" when you use it, and you are unable to scroll.

I am using code:

@media screen and (max-width:767px) {
.ProductItem-gallery .ProductItem-gallery-scroll {
    display: grid;
    place-items: center;
    margin-bottom: -80px;
  }
}

70s Silk Jacket — Risk Thrift 

Here is the link to one of the products in question. The page shouldn't need a password, but I did remove it from the home tab.

Thanks!

On 8/5/2022 at 7:56 PM, BrittanyRisk said:

Hello, I am trying to change the mobile version of the product gallery into a carosel with a visible slideshow/thumbnail. I used the following code, but on some of the products the slideshow "freezes" when you use it, and you are unable to scroll.

I am using code:

@media screen and (max-width:767px) {
.ProductItem-gallery .ProductItem-gallery-scroll {
    display: grid;
    place-items: center;
    margin-bottom: -80px;
  }
}

 

70s Silk Jacket — Risk Thrift 

Here is the link to one of the products in question. The page shouldn't need a password, but I did remove it from the home tab.

Thanks!

The product is fine. Can you explain in more detail?

"some of the products the slideshow "freezes" when you use it, and you are unable to scroll."

11 hours ago, tuanphan said:

The product is fine. Can you explain in more detail?

"some of the products the slideshow "freezes" when you use it, and you are unable to scroll."

I will try to attach a screen recording from my phone.
The slideshow thumbnail at the bottom of the main photo can be dragged to over so you can see all of the photos available. However, when I drag it, it freezes, and I am unable to use it. 

On 8/7/2022 at 8:05 AM, BrittanyRisk said:

I will try to attach a screen recording from my phone.
The slideshow thumbnail at the bottom of the main photo can be dragged to over so you can see all of the photos available. However, when I drag it, it freezes, and I am unable to use it. 

Thank you. I can't replicate problem on my end.

How about making arrows bigger + hide thumbnails?