Jump to content

Select size button shape on Avenue 7.0 product page

Recommended Posts

  • Replies 12
  • Views 271
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 6/26/2022 at 8:07 PM, mrart said:

Hi,

Thank you,

Here is an example:

https://www.myriamrousseauart.com/baby-animals-1/panda-iii

I have tried this code and it helped, but the corners were still rounded:

.variant-select-wrapper select {
    padding:12px; width:43%
}

Thanks again,

The url doesn't exist. Can you check it again?

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

 

Hi again,

Thank you so much, this is working perfectly on mobile, I've gotten the widths of the buttons to be equal as well, but the widths don't remain equal on desktop, I tried adding "!important;" to the width input, but it didn't help:

#productDetails .product-variants .variant-option select {
    padding: 15px;
    width: 197px !important;
    border-radius: 0 !important;
}

Would you know of something that can help to keep the same width of buttons on desktop as well?

Thank you again,

Link to comment
On 7/2/2022 at 9:29 PM, mrart said:

 

Hi again,

Thank you so much, this is working perfectly on mobile, I've gotten the widths of the buttons to be equal as well, but the widths don't remain equal on desktop, I tried adding "!important;" to the width input, but it didn't help:

#productDetails .product-variants .variant-option select {
    padding: 15px;
    width: 197px !important;
    border-radius: 0 !important;
}

Would you know of something that can help to keep the same width of buttons on desktop as well?

Thank you again,

Can you send all current code in Custom CSS? I guess some code in wrong place

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

 

Hi,

Thank you, it now seems to be working on desktop, I think the previous info must have been cached.

Would you know how to have the border of the select size box on desktop (mobile is fine) appear as one colour? I believe it presently has the "raised" border.

Also, would you know if it's possible to change the background colour of the select size box to white?

Thank you again,

Link to comment
7 hours ago, mrart said:

 

Hi,

Thank you, it now seems to be working on desktop, I think the previous info must have been cached.

Would you know how to have the border of the select size box on desktop (mobile is fine) appear as one colour? I believe it presently has the "raised" border.

Also, would you know if it's possible to change the background colour of the select size box to white?

Thank you again,

Add this CSS

#productDetails .product-variants .variant-option select {
    border: 2px solid red !important;
    background-color: white;
}

 

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

 

Hi,

Thank you very much this works perfectly.

Is there also a way to choose the font within the button?

Is it also possible to change what the button says, in this case could it say " 12 x 12" " rather than " Select Size" ?

Thank you again,

Link to comment
14 hours ago, mrart said:

 

Hi,

Thank you very much this works perfectly.

Is there also a way to choose the font within the button?

Is it also possible to change what the button says, in this case could it say " 12 x 12" " rather than " Select Size" ?

Thank you again,

Use this code

#productDetails .product-variants .variant-option select {
    border: 2px solid #fff !important;
    font-family: monospace;
    background-color: lightgrey;
}

To rename text, I Have no idea, However I remember on forum, there has some topics, you try searching.

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

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.