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

Product navigation arrows not visible in desktop


Quin

Question

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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

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

 

Link to post
  • 0

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 post

Create an account or sign in to comment

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


×
×
  • Create New...