How to add button outline on mobile image banner

Solved

How to add button outline on mobile image banner

YIVAN
Explorer
51 1 16

Hello,

 

Is there a way to make the shop now button have an outline in the mobile image banner section? The desktop version the button outline is white but since I chose to have a container for the mobile version the outline won't show. Is there a way to keep the desktop version white and change the mobile version to black outline?

Here are pictures of how it looks:

Screen Shot 2024-06-18 at 1.17.18 PM.png

Screen Shot 2024-06-18 at 1.17.48 PM.png

URL: https://www.yivan.us/

 

Thanks in advance

 

Accepted Solutions (2)

BSSCommerce-B2B
Shopify Expert
553 110 133

This is an accepted solution.

Hi @YIVAN , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

BSSCommerceB2B_0-1718735581662.png

 

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

 

 

 

@media only screen and (max-width: 749px) {
  .button.button--secondary {
    outline: auto;
  }
}

 

 

Step 3: Save your code and reload this page.

=>> The result: 

BSSCommerceB2B_1-1718735628364.png

 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-B2B
Shopify Expert
553 110 133

This is an accepted solution.

Hi @YIVAN 

Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid and insert the below code at the bottom of the file -> Save

@media screen and (max-width: 749px) {
.banner__box.content-container a.button.button--secondary {
    border: 1px solid black !important;
}
}

 here is result:

BSSCommerceB2B_0-1718735929504.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 2 (2)

BSSCommerce-B2B
Shopify Expert
553 110 133

This is an accepted solution.

Hi @YIVAN , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

BSSCommerceB2B_0-1718735581662.png

 

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

 

 

 

@media only screen and (max-width: 749px) {
  .button.button--secondary {
    outline: auto;
  }
}

 

 

Step 3: Save your code and reload this page.

=>> The result: 

BSSCommerceB2B_1-1718735628364.png

 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

BSSCommerce-B2B
Shopify Expert
553 110 133

This is an accepted solution.

Hi @YIVAN 

Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid and insert the below code at the bottom of the file -> Save

@media screen and (max-width: 749px) {
.banner__box.content-container a.button.button--secondary {
    border: 1px solid black !important;
}
}

 here is result:

BSSCommerceB2B_0-1718735929504.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency