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?


Guest

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.

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

Link to comment
  • 4 months later...

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!

Edited by BrittanyRisk
Link to comment
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."

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

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

image.png.0b6ccbe2061a578bfa5e231297b6c3e2.png

 

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