Streaming live at 10am (PST)

Cart Button & Quantity Input Styling Broken

Hey everyone! I’m having some styling issues with my site’s cart buttons and quantity input buttons across different devices and browsers.

  1. There’s a white gap between the black cart buttons on my site and the black quantity inputs across different browser versions. It seems to be the worst on desktop in Chrome for Windows (pictured below). I’d simply like the black cart buttons to sit flush with the black quantity inputs so that there’s no gap. Here’s a screenshot of the styling issue.

  1. There’s also a styling issue with the input arrow incrementer that causes it to be offset outside of the black quantity input button, just to the right of it. I’d like for the arrow to appear within the black quantity input button rather than jutting out to the right of it. Here’s a screenshot of this particular styling issue on Chrome for Mac.

  1. The last styling issue pertaining to these buttons is on mobile. The black add to cart buttons and the white ‘Select Service Packages’ product option fields aren’t properly centered or aligned with each other on mobile. Here’s a screenshot of this particular styling issue on Safari for iPhone.

I’m not sure why this is happening but I’d appreciate any help you’re willing to offer – thank you!

Thank you!

Here’s a link to the live site as well:

Here’s a read-only version of the site:

Hey Matthew!

Thanks so much for posting the problem! It turns out it is a really easy fix. I will attach a Loom recording below explaining how to fix the issue :slight_smile:

After the fix:

Feel free to ask more questions if you have them!


1 Like

Thank you so much @themikic!

You offer the best and fastest support I’ve ever received! I appreciate your help!


1 Like