How can I frame a button only for mobile view?

[fusecoffee]

Hello,

I want my button to be framed, but only on mobile. You can see a screenshot of how I want the button to be, but I want it to be full on desktop. How can I fix this?

The site is fusecoffee.be

Thanks

[BrewBrains]

Hi @fusecoffee ,

Can you let me know which section are you referring to?  May be image was not attached.

[fusecoffee]

Sorry, I attached the wrong image. Here you go.

So again, here you see the outline of the button. I only want the outline on the mobile website, and I want the button to be full (colored) on desktop.

Thanks!

[BrewBrains · Accepted solution]

Hi @fusecoffee 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
   2. Open your theme.liquid file
2. Paste the below code before </body> on theme.liquid

<style>
.banner__content a.button.button--secondary {
    background: #ffffff;
    color: #000000;
}
@media only screen and (max-width: 600px) {
  .banner__content a.button.button--secondary {
    background: unset;
    color: unset;
}
}
</style>

This should implement solid background for desktop and tabs and be transparent for mobile. 

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution.

[fusecoffee]

Thanks! That works. Now, how can I remove that white border around the button on desktop?

Thanks!

[BrewBrains]

@fusecoffee 

I am bit confused here, do you mean to remove the border for same button on desktop? Can you elaborate and attach the screenshot please.

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution.

[fusecoffee]

Sorry, I mean can I remove the white border (as you can see on the screenshot), only on desktop of course.

[BrewBrains]

Add the css below in the same place where you added the other css.

@media only screen and (min-width: 702px) {
.banner__content .button--secondary:after{
    box-shadow: none;
}
}

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution.

[amouseytale]

Hi

I am back! After a while I discovered the following issue with my webshop/cart/checkout. 

I have attached two pictures to clarify the issue. Bottom line is that I don’t want my customers to be able to place an order without clicking a button that they agree with states polices. When they place an order with viewing their cart firstly before checking out this is the case. But if they chose to not view their cart but instead jump directly to check out it’s possible to place an order without agreeing with stated policies. 

Do you have any ideas or solutions for this? I understand the issue is that I have one cart page and one check out page. Is it possible to add an agree button requirement to the check out page?