Jump to content

Changing Chevron Size on the images for Products age when in Half format

Go to solution Solved by albertbooy,

Recommended Posts

Hi

Hoping someone can assist. I have searched the forum but can't seem to find some css to change the size and colour of the chevron left and right on each Product details page. This is when the format of the Product page is "Half"

The size is quite large and obscuring. 

Greatly appreciated

Thanks Albert

Screenshot 2024-05-13 at 9.36.35 AM.png

Link to comment
15 hours ago, albertbooy said:

Hi

Hoping someone can assist. I have searched the forum but can't seem to find some css to change the size and colour of the chevron left and right on each Product details page. This is when the format of the Product page is "Half"

The size is quite large and obscuring. 

Greatly appreciated

Thanks Albert

Screenshot 2024-05-13 at 9.36.35 AM.png

Can you share your URL so we can check it?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
11 hours ago, albertbooy said:

Hi thanks for responding the link to the page: Transcend Safaris - Products Page

You can try the following custom css

.pdp-carousel-controls [data-product-gallery].chevron-prev, .pdp-carousel-controls [data-product-gallery].chevron-next {
  background: #ccc;
  color: red;
}

Change the color as you wish

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution

Thanks a lot that did the trick, much appreciated 😀 I was able to also hide the box so just the chevron indicator shows.

Can you help me also increase the weight of the indicator button. I want to make it  lot thicker to stand out a little more,

Cheers 

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.