Jump to content

Add to Cart button size

Recommended Posts

Site URL: https://www.hamiltonworkshop.com/

Hi

I´m having trouble with the "add-to-cart" button in a product block with 4 columns.

When customers press the button, the "Adding - Added" animation breaks the grid of my product blocks - see image.

The initial width of the add-to-cart button is based off my viewport size - I guess - How do I keep it that way?

It seems to revert to at standard width after pressing the button?

Screenshot 2021-05-21 at 10.42.18.png

Link to comment
On 5/25/2021 at 5:16 PM, maskiner said:

@tuanphan you are wonderful - thanks for your help

Do you need to solve these?

Site URL: https://www.hamiltonworkshop.com/

1. (Tablet-Homepage) Increase width or change to 2 items/row?

hamiltonworkshop.com-01-min.png

2. (Mobile-Homepage) change to 2 products/row?

hamiltonworkshop.com-02-min.png

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
  • 3 weeks later...
20 hours ago, maskiner said:

It solved it on desktop, but as you point out, not on tablet and mobile.

How do I change to 2 products/row on tablet and mobile?

Thanks in advance

Add to Design > Custom CSS

/* tablet-mobile products */
@media screen and (max-width:991px) {
div#page-section-5fb24f0f844f9e409ec54198 .span-3 {
    width: 50% !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 months later...
  • 2 weeks later...

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.