How can I resize a 'shop now' button using custom CSS?

Store Design
,

Topic summary

A homepage “Shop the Archive” button was considered too small (~260×60 px). The goal was to enlarge it to roughly 508×181 px on desktop only, with text scaling.

Solution provided: a CSS media query targeting desktop screens (min-width: 991px) to adjust the banner button:

  • .banner__buttons .button { min-width: 540px; min-height: 180px; font-size: 48px; }
  • Implemented by adding the snippet at the end of base.css.

Outcome: The original poster confirmed the code worked as desired. A suggestion was made to mark the thread as an accepted solution.

Follow-ups: One participant reported the snippet did not work for them (no further troubleshooting details provided). Another asked how to change the size specifically for mobile.

Notes:

  • The code uses a CSS media query (a rule that applies styles only when screen conditions are met) to confine changes to desktop.
  • No mobile-specific CSS was supplied in the thread.

Status: Partially resolved for the OP; open issues remain for others and for mobile sizing guidance.

Summarized with AI on December 29. AI used: gpt-5.
1

I have a ‘shop now’ button on my webshop’s homepage that is too small, it seems to be roughly 260x60p and I would like to increase it to 508x181p with the text scaling accordingly. Could someone please post the custom CSS to increase the size of the button? I should mention that I don’t want to alter the sizing of the button on the mobile layout, only desktop. Thanks.

Here is the webpage with the button (the ‘Shop the Archive’ button):

https://www.allisonsarchive.shop/

1 Like
2

@AllisonsArchive , Please add the below line of CSS code at the end of your base.css file.

@media(min-width:991px){
.banner__buttons .button{
min-width: 540px;
min-height: 180px;
font-size: 48px;
}
}

let me know if you face any issue

2 Likes
3

Thank you Akibhusen, this is exactly what I was looking for.

4

@AllisonsArchive , if you got the answer then you can mark this thread as an Accepted Solution

5

This didnt work for me

6

if I just want to change the size for mobile layout?