Resize image banner button on mobile for dawn theme

Store Design
, , , , ,

Topic summary

A user is experiencing issues with button sizing on mobile devices for their Shopify store using the Dawn theme. The “New Arrivals” and “Shop All” buttons appear inconsistent compared to other “Shop now” buttons on banner images—desktop displays correctly, but mobile formatting is problematic.

Troubleshooting Steps Taken:

  • A support responder provided custom CSS code to be added to the theme’s stylesheet (base.css, style.css, or theme.css)
  • The CSS targets mobile screens (max-width: 519px) and adjusts button container properties including flex display, padding, and alignment

Current Status:

  • The CSS solution partially worked but introduced new issues
  • Buttons are not properly centered on the user’s mobile device
  • Button size is slightly larger than expected based on the reference screenshot

The discussion remains ongoing as the initial fix requires further refinement to achieve the desired mobile button appearance.

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

Hi,

I’m trying to resize the New Arrivals and Shop All buttons to be the same size as the Shop now button on my other banner image (see image below) on mobile. Desktop seems to be fine, it’s just mobile which has the issue. I tried several codes, however, none of them worked. I am using Dawn theme. Thanks so much in advance for any help!

Screenshot_20231011_152945_Chrome.jpg
Screenshot_20231011_152945_Chrome.jpg1080×730 110 KB

Screenshot_20231011_154654_Chrome.jpg
Screenshot_20231011_154654_Chrome.jpg1080×781 138 KB

1 Like
2

Hi @bougli

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

3

Sure. Www.shopbougieglitter.com

1 Like
4

Thank you for the info. Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 519px){
.banner__buttons.banner__buttons--multiple {
    display: flex;
    flex-direction: column;
    max-width: 15rem;
    margin: auto;
}
a.button.button--secondary {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
}
@media screen and (max-width: 519px)
.banner--content-align-mobile-center .banner__buttons--multiple>* {
    min-width: 0rem !important;
}
5

It worked somewhat - it is not showing centered on my device and the size is a bit larger than your screenshot.

Screenshot_20231012_113314_Chrome.jpg
Screenshot_20231012_113314_Chrome.jpg1080×1189 123 KB

1 Like