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
  • 5 months later...
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?

Screen Shot 2022-04-02 at 4.45.58 PM.png

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

Screen Shot 2022-04-02 at 4.45.58 PM.png

Can you share link to a product where you have problem?

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

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?

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

About Paul: Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of 
SF Digital, a company dedicated to improving websites by building the features Squarespace didn't include™. See our range of extensions to improve your online store.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

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...