Solved

How to change the button width on this image banner?

empiricalarby
Pathfinder
139 1 27

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

 

Accepted Solution (1)

ZenoPageBuilder
Shopify Partner
1049 202 217

This is an accepted solution.

Hello @empiricalarby 👋

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

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

View solution in original post

Replies 3 (3)

fadi_yousif
Shopify Partner
342 43 60

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.

Freelance Shopify Developer | Helping Shopify merchants grow with high-converting online stores!
Let's work together!
 - Did I help? Leave a tip!
 - Need my help? Chat on Telegram or WhatsApp

ZenoPageBuilder
Shopify Partner
1049 202 217

This is an accepted solution.

Hello @empiricalarby 👋

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

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
empiricalarby
Pathfinder
139 1 27

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