Reduce the size of two buttons in desktop and mobile

Shopify Discussion

Topic summary

A user seeks help reducing the size of two buttons in an image banner on their Shopify store for both desktop and mobile views. They provide a store URL and screenshot showing oversized buttons.

Current Status:

  • The issue remains unresolved initially, with the user exploring help from multiple respondents
  • One commenter mentions their solution was removed by moderators
  • Private messages were exchanged between some participants

Solution Provided:
A detailed CSS code solution was shared to add to section-image-banner.css:

  • For desktop (min-width: 750px): Sets button minimum width to 19rem, height to 4rem, and gap to 4rem
  • For mobile (max-width: 749px): Adjusts buttons to inline-flex with wrap, 1rem gap, and 19rem max-width
  • Includes before/after screenshots demonstrating the reduced button sizes

The solution involves editing the theme code through: Online Store → Themes → Actions → Edit Code → Assets → section-image-banner.css

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello, I need help reducing the size of two buttons in both desktop and mobile in my image banner to make it look more appropriate with the layout. Thank you in advance :folded_hands:

Here’s my store URL: https://u1130y-zj.myshopify.com/

Button.jpg
Button.jpg1903×846 208 KB

2

hello @jabee01
i have once had similar issue with my store
have you been able to fix it yet ?

3

Hi, not yet. I just posted this issue. Hoping to get any solution to this.

4

@jabee01 I just offered a solution but my comment was removed, i don’t know which other way to help

5

okay
do you use whatsapp ? or discord

6

I just sent you a DM, looking forward for your response, thank you so much!

7

Hello @jabee01
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-image-banner.css
add this code at the end of the file and save.

@media screen and (min-width: 750px) {
.banner--content-align-center .banner__buttons--multiple > * {
min-width: 19rem !important;
min-height: 4rem !important;
}
.banner__buttons {
gap: 4rem !important;
}
}
@media screen and (max-width: 749px) {
.banner__buttons {
display: inline-flex;
flex-wrap: wrap;
gap: 1rem !important;
}
.banner__buttons {
max-width: 19rem !important;
}
}

result

91.png
91.png353×583 232 KB

90.png
90.png1020×520 587 KB

If this was helpful, hit the like button and accept the solution.
Thanks