ContagionMedia Posted September 18, 2021 Share Posted September 18, 2021 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 Link to comment
tuanphan Posted September 19, 2021 Share Posted September 19, 2021 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
friendsfirst Posted October 13, 2021 Share Posted October 13, 2021 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 Link to comment
tuanphan Posted October 14, 2021 Share Posted October 14, 2021 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
GrahamG Posted October 15, 2021 Share Posted October 15, 2021 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
tuanphan Posted October 17, 2021 Share Posted October 17, 2021 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
earthlyborn Posted April 2 Share Posted April 2 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? Link to comment
tuanphan Posted April 2 Share Posted April 2 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? 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
earthlyborn Posted April 3 Share Posted April 3 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
paul2009 Posted April 3 Share Posted April 3 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
Recommended Posts
Posted by tuanphan,
This solution worked out for many users.
Recommended by SpencerC
1 reaction
Go to this post
Create an account or sign in to comment
You need to be a member in order to leave a comment