How to add button outline on mobile image banner

[YIVAN]

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:

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

Thanks in advance

[BSSCommerce-B2B · 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:

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: 

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! 

[BSSCommerce-B2B · 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:

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: 

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! 

[BSSCommerce-B2B · 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:

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 😍