Jump to content

Product Page Mobile VARIANT BUTTONS

Recommended Posts

Hi everyone, 

I need a bit help with my product page when on mobile.

I use buttons to select variants, and for default it has an hover effect, I'm ok with the effect when using it on desktop. But on mobile, it does something weird, where the hover effect colour remains active once it has been selected. I want it to be black, like the ADD TO CART BUTTON.

So my question is, is there any way to deactivate or change the colour of the hover effect for VARIANTS ON MOBILE ONLY?

Thank you so much!

My website: https://www.gastonduflos.com/shop/p/bondi-beach-print-ap001

Thank you as always! @tuanphan

IMG_6868.jpg

IMG_6869.jpg

Link to comment

You can add this to Website Tools (under Not Linked) > Custom CSS

/* Variant buttons on mobile */
@media screen and (max-width:767px) {
.variant-option label.sqs-button-element--secondary {
    background-color: black !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Thanks @tuanphan this code made all of the buttons full black on mobile.

I do want them to look light grey like in the desktop version , my problem is with the hover effect colour. It remains active once it has been selected. I want it to be black, like the ADD TO CART BUTTON, but only the selected button and hover effect for the selected button on mobile. Can we do this? Thank you!

 

 

Thank you so much!

My website: https://www.gastonduflos.com/shop/p/bondi-beach-print-ap001

Thank you as always! @tuanphan

Screenshot 2023-10-24 at 8.59.38 pm.png

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.