Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

I can only see one product photo on mobile version?


Recommended Posts

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...