homepage design mobile phone

[sahar5]

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

[Emre_SecretHero]

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!

[Beast_Boy]

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!

[Dan-From-Ryviu]

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

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

[GTLOfficial · Accepted solution]

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

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