Jump to content

Product navigation arrows not visible in desktop

Recommended Posts

Site URL: http://www.intotheblackpines.com

When in a product page on desktop view, the only way to navigate through the product photos is to actually click on them under the main photo. But in Mobile, you just swipe sideways on the image to navigate through the photos. I remember there was arrows to the side of the photo and the (1/5) to the top right of the photo when in desktop view, so that you could click on the arrow and navigate through the photos, but now they're not there. Also , in mobile, the (1/5) does appear, but it appears in white and some of my products have a white background so you can't see the numbers at all, I will also need help changing that to black or even a gray. Thank you in advance everyone! password to the site is jogajh89

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Add this to Home > 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: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !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
  • 1 month later...

I also used the code above that @tuanphan posted and was able to make it work for me (thank you!) 

However, I was having trouble with my mobile site and the arrows were showing up as white blocks instead of arrows. I'm sure this is due to the design of my template. But I just had to change the word 'white' to 'transparent' and it works perfectly now! 

Thanks so much for some great code, dude! Helping this newb make her site function. 

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.