Add to cart buttons larger than the product blocks

Site URL: https://gregmaroney.com/sheet-music

All of my buttons changed size in the last few days. Many are now larger than the product blocks. 

Design/buttons/  doesn't have size as an editable feature.

I know I had made them all smaller when I designed the site, but now can't find where or figure out why it changed on its own.

I was researching and found this answer:  In HOME>DESIGN>CUSTOM CSS 

.sqs-add-to-cart-button {
    width: 50% !important;
}

but it didn't change anything.

Please help, this is making me sweat

Not that familiar with 7.1 but I would think you go to the page in config then design then site styles, click on a button and the menu should have a size option, in a drop down most likely. However if it changed on its own could be a loading issue due to internet traffic and it will revert back. I have had a few weird things happen like that this week. 

As I said above, I've been to Home/Design/Buttons and there are 3 edits, Stye, Shape and Padding. No size. 

I know when I first put the site together I found where to change the button size because I have a page with 250 product blocks (I know i is not an ideal layout, wanted a table but alas...). The buttons that changed are now overlapping and making the page confusing and unusable on some formats.

There are threads in the Circle members Forum describing the same issue with buttons.  So Something is going on with 7.1. 

On 3/21/2020 at 2:03 PM, lamaroney said:

Site URL: https://gregmaroney.com/sheet-music

All of my buttons changed size in the last few days. Many are now larger than the product blocks. 

Design/buttons/  doesn't have size as an editable feature.

I know I had made them all smaller when I designed the site, but now can't find where or figure out why it changed on its own.

I was researching and found this answer:  In HOME>DESIGN>CUSTOM CSS 

.sqs-add-to-cart-button {
    width: 50% !important;
}

but it didn't change anything.

Please help, this is making me sweat

This has had me scratching my head too but I've finally figured it out:

.sqs-add-to-cart-button {
  min-width:0 !important;
}

Adjust it to a size that suits you. Hope it works for you!

This came from another post having a similiar issue:

 I moved the Image Block Poster Title Separation from 3% to 0% and it looks like the issue has been fixed. 

This is happening in product blocks. And the buttons are larger than the blocks on one page. How can that even happen?

and the code you suggested, you’ll notice above, I already used to no effect.

ive tried emailing Squarespace and so far two answers that were completely worthless. One said to check out the design and style tips video and the other that I have custom code, and that might have caused it. The code I tried using to fix it.

getting pretty frustrated.

8 hours ago, lamaroney said:

This is happening in product blocks. And the buttons are larger than the blocks on one page. How can that even happen?

and the code you suggested, you’ll notice above, I already used to no effect.

ive tried emailing Squarespace and so far two answers that were completely worthless. One said to check out the design and style tips video and the other that I have custom code, and that might have caused it. The code I tried using to fix it.

getting pretty frustrated.

 

You're using width which is why it isn't working. Use min-width instead. This is my CSS:

.product-block .sqs-add-to-cart-button {
  min-width:50% !important;
}

superhanss, it happened before trying that code. I have since removed it and still the problem exists. The third answer from Squarespace was to disable all 250 Add to Cart buttons, so that it would be like a landing page instead.  The fourth answer was to say that it was an issue on their end but fixes are made in order of popular demand, so I should change to page for now to only 4 items per row instead of 6, since it may be a long time (if ever) that it is addressed.

what I really wanted was a sortable table with 4 columns.

1. Song title

2. Preview image icon for the first page of the sheet music

3. buy button for pdf sheet music

4. Buy button for mp3

I wrote to the makers of the popular table code and asked about buy buttons within the table and the answer was no.

It looks like I may just have to look around for a different platform.

On 3/22/2020 at 8:35 AM, Superhanss said:

This has had me scratching my head too but I've finally figured it out:

.sqs-add-to-cart-button {
  min-width:0 !important;
}

Adjust it to a size that suits you. Hope it works for you!

This worked for me. Thanks!