How can I make variant buttons uniform in the Impulse theme?

Technical Q&A
,

Topic summary

A user seeks CSS code to make variant buttons uniform width in the Shopify Impulse theme, providing store credentials and screenshots showing current uneven buttons versus desired equal-width layout.

Solution Provided:
Two community members offered CSS solutions to add to theme files:

  • One suggested adding code to theme.css setting variant buttons to 25% width with margins
  • Another recommended adding CSS to theme.liquid file before the closing </body> tag

Outcome:
The original poster confirmed the first solution worked as expected and thanked the contributor.

Additional Discussion:

  • A warning was issued about using !important in CSS, noting it’s not best practice and can cause conflicts across the site
  • The original poster subsequently requested help with a separate issue about hiding product prices on collection pages
Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
9

Hello @Digital_Imran

Css !important property doesn’t use general purpose. It’s not a good practice. If you are using !important property it can cause more problems for your store.

And everytime important CSS does not work, sometimes it may effect other CSS on the whole website.

If helpful, please Like and Accept this Solution to help others