Button size width

Store Design

Topic summary

A user wants to reduce the horizontal padding (space on the sides) of button text in their Shopify store, as shown in an attached screenshot with red arrows marking the areas to minimize.

Multiple solutions provided:

  • CSS modifications to base.css file: Add code targeting .rich-text__buttons with max-width: 60% for screens up to 749px wide, or set min-width: 16rem with flex-grow: unset for multiple buttons.

  • Custom CSS in theme.liquid: Insert <style> tags before the closing </body> tag with media queries adjusting max-width to 15rem for mobile screens (max-width: 767px).

Implementation steps consistently include:

  1. Navigate to Online Store → Themes → Edit Code
  2. Locate either base.css or theme.liquid file
  3. Paste provided CSS snippet at the specified location
  4. Save changes

Responders included screenshots showing expected desktop and mobile results. The discussion remains open with no confirmed resolution from the original poster.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi, i would like to reduce the space on the sides of the “text” of the button which I have attached in the screenshot below. The space I am talking asbout has been marked with the red arrows. I would like to reduce this space for both of the buttons. Is there a way to do this?

Site url: https://magneticprints.com.au/pages/reviews

Untitled.jpg
Untitled.jpg1920×1020 126 KB

2

@magneticprints please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and  (maxwidth:749px){
.rich-text__buttons{max-width: 60%;}
}
3

Hi @magneticprints ,

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

.rich-text__buttons--multiple>* {
  min-width: 16rem!important;
  flex-grow:unset!important
}

You will get the result like this

  • Mobile

BSSCommerceB2B_1-1722743522788.png
BSSCommerceB2B_1-1722743522788.png489×936 64.5 KB

  • Desktop

BSSCommerceB2B_0-1722743512920.png
BSSCommerceB2B_0-1722743512920.png1539×902 101 KB

If it helps you, please like and mark it as the solution.

Best Regards

4

Hi @magneticprints

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

theycallmemakka_0-1722743295077.png
theycallmemakka_0-1722743295077.png423×691 45.4 KB

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

5

Hello @magneticprints

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { .rich-text__buttons--multiple>* { max-width: 15rem !important; } }

niraj_patel_0-1722743868493.png
niraj_patel_0-1722743868493.png319×292 8.12 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.