How to change the button width on this image banner?

Technical Q&A
1

https://empiricalwater.com/

If you scroll down to the Rediscover your Tea image banner, how can the Buy Now and Learn Stuff button width be edited to be less wide?

Thanks

2

You can set a max-width by navigating to assets → base.css and adding a CSS rule like this:

.banner__buttons .button {
  max-width: 150px;
}

Alternatively, you can add the code to the Custom CSS section inside the theme editor.

1 Like
3

Hello @empiricalarby :waving_hand:

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.banner__buttons .button {
    width: 12rem !important;
    margin: auto !important;
    padding: 0 !important;
}

The result

Screenshot 2024-01-17 at 10.06.15.png
Screenshot 2024-01-17 at 10.06.15.png1108×442 276 KB

Hope that helps!

1 Like
4

Awesome, thanks. How do I make these buttons sit one above the other instead of side by side? Thank you