homepage design mobile phone

Store Design
, ,

Topic summary

A Shopify store owner using the Dawn theme wants to reorder two homepage buttons (“Women” and “Men”) on mobile so they match the desktop layout—Women on the left, Men on the right.

Multiple CSS solutions offered:

  • Emre_SecretHero suggests adding CSS to base.css using flexbox with flex-direction: row and media queries for screens under 749px
  • Beast_Boy recommends a similar approach: edit the main CSS file and use mobile-specific styles to control button order
  • Dan-From-Ryviu proposes adding min-width: 16rem to .banner__buttons .button via the Custom CSS section in theme customization
  • GTLOfficial provides the most targeted fix: insert CSS into section-image-banner.css with display: inline-flex and flex-wrap: unset, plus minimum width constraints for mobile

Status: Multiple working solutions provided with code snippets and screenshots. The issue appears resolved, though the original poster has not confirmed which approach they implemented.

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

Hi, I want the two buttons on the mobile phone be like the homepage on my laptop. Women should be left and men on the right. How can I change that?

here you can find an screenshot.

My theme is dawn and my website is: www.sahar-fashion.com

kind regards, Sahar

IMG_4664.PNG
IMG_4664.PNG1290Ă—2796 279 KB

2 Likes
2

Hi @sahar5 ,

To fix it, here is my solution:
Go to:
Themes → Actions → Edit code → Assets → base.css. And scroll down to the bottom and paste this code:

@media screen and (max-width: 749px) {
  .banner__buttons--multiple {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    gap: 12px;
  }

  .banner__buttons--multiple > a {
    min-width: auto !important;
    flex: 1 1 0%;
    text-align: center;
  }
}

Hope it helps.

Good Luck!

3

Hi Sahar

To swap your buttons on mobile, go to to Online Store > Themes > Edit code and open your theme’s main CSS file (usually under assets).

Scroll to the bottom and add a mobile-only style that treats your button group as a flexible row. Then set “Women” to appear first and “Men” second when the screen is narrow.

Save your changes, refresh your site on a phone, and you’ll see the buttons flip into the right spots, same same on desktop!

4

Please add this code to Custom CSS of that section in theme customize

.banner__buttons .button {
    min-width: 16rem;
}

Screenshot 2025-05-13 at 09.33.36.png
Screenshot 2025-05-13 at 09.33.36.png912Ă—1084 110 KB

5

Hello @sahar5
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 (max-width: 749px) {
.banner--content-align-mobile-center .banner__buttons--multiple > * {
min-width: 16rem;
}
.banner__buttons {
display: inline-flex;
flex-wrap: unset;
}
}

result

34.png
34.png370Ă—532 127 KB

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