How can I make the Button label 'outline style' only on mobile

Store Design
, , , , , , , , , , , , , , ,

Topic summary

A user seeks custom CSS to make an image banner button display with an outline style on mobile devices only, while keeping the default filled style on desktop. They provided screenshots showing the desired mobile appearance and shared their store URL (cheffings.net/collections/all).

Multiple solutions were offered:

  • LizHoang suggested adding CSS to base.css targeting .button.button--primary with media query max-width: 768px, changing background to white and text to black

  • suyash1 provided similar CSS targeting .banner__buttons .button with max-width: 749px breakpoint

  • topnewyork recommended inserting CSS via <style> tag in theme.liquid before </head>

  • websensepro offered more specific CSS targeting the full class chain .banner__box ... .banner__buttons a.button.button--primary

All solutions use media queries to apply white background and black text colors exclusively on mobile viewports. The discussion remains open with no confirmed resolution from the original poster.

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

I want to have a custom css code that makes the image banner label button to be outline style only on mobile, and not on desktop,like shown below

Screenshot 2025-02-26 at 13.12.35.png
Screenshot 2025-02-26 at 13.12.35.png2880×1800 822 KB

Image 26-02-2025 at 13.11.jpeg
Image 26-02-2025 at 13.11.jpeg2880×1800 332 KB

the url is https://cheffings.net/collections/all

1 Like
2

Hi @lukafernada

Please share the store URL or the current theme you’re working on. I know your store URL, but I can’t see the banner matching the picture you posted.

3

@lukafernada can you please share this page link?

4

Hi @lukafernada , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

5

Hi @lukafernada can you share store url?

6

https://cheffings.net/collections/all

7

https://cheffings.net/collections/all .

8

https://cheffings.net/collections/all ..

9

Hi @lukafernada

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

@media (max-width: 768px) {
a.button.button--primary {
    background: #fff !important;
    color: #000 !important;
}
}

Result

LizHoang_0-1740577207869.png
LizHoang_0-1740577207869.png355×529 232 KB

Best,

Liz

10

@lukafernada please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and (max-width:749px){
.banner__buttons .button{background-color: #fff; color: #000;}
}
11

@lukafernada

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

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

12

Hi @lukafernada

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:768px){
.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient .banner__buttons a.button.button--primary {
    background: #ffff !important;
    color: #000 !important;
}
}

Result:

websensepro_0-1740577767063.png
websensepro_0-1740577767063.png395×578 280 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!