Smaller hero buttons on mobile devices

Store Design
, , ,
1

Hi

I want to reduce the size on my mobile hero buttons, they are too big and cover bigger part of the screen, wish to have smaller and a nice border radius on them. Can we figure something out? :slightly_smiling_face:

Storeurl:

www.dekanten.no

2

Hi @Dekanten ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

topnewyork_0-1724921860237.png
topnewyork_0-1724921860237.png312×555 95.1 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

1 Like
3

Hello @Dekanten

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { .banner__buttons.banner__buttons--multiple a::before, .banner__buttons.banner__buttons--multiple a::after { border-radius: 15px; } .banner--content-align-center .banner__buttons--multiple>* { border-radius: 15px; } .banner--content-align-mobile-center .banner__buttons--multiple>* { flex-grow: 1; min-width: 18rem !important; } #Banner-template--21636163502354__image_banner_B7RaMJ .banner__buttons.banner__buttons--multiple { width: 74% !important; margin: 0 auto; } }

niraj_patel_0-1724922050127.png
niraj_patel_0-1724922050127.png306×239 9.79 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
4

Hi,

I added the code but the button is grey colored on the edges, outside the border. Can we fix this too? :slightly_smiling_face:

See attached image.

snipping.png
snipping.png400×234 3.13 KB

5

Yes we can. Give me a mint. I am giving you the fix

1 Like
6

@Dekanten , check the below code:

.button:before , .button:after { border-radius: 25px !important; }