How to hide button from desktop and keep in mobile (sense theme)

[britt2lee]

I have a button that I need to be visible on mobile but not on desktop.

(Ideally it would be great if this button could also be apart of the header section so I don’t have to duplicate it on every page).

Website: https://f7b6e0-f9.myshopify.com/

[britt2lee]

@TerenceKEANE

[rutvik_shop]

Hello @britt2lee

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css> add this code at the bottom of the file.

@media only screen and (max-width: 767px) {
.isolate {
    display: none;
}
}

[Vinsinfo]

@britt2lee Please follow below steps to hide "Book now " button on desktop and add that button in header to avoid duplicating the button on every page. Let me know whether it is helpful for you.

1. From admin, go to “Online stores” → “Themes”.
2. Click action button from the current theme and select “Edit code”.
3. Go to “header.liquid” file and search and paste the below code at the next line and save changes.

    [Book now](https://www.tanglezhairstudio.co.nz/)

4. Then go to “base.css” file and paste the below code at the bottom of the file and save changes.
   NOTE: You can change the px from which you want to hide the button.

@media screen and (min-width: 990px) {
    .book-now-button {
        display: none;
    }
}

Now, the “Book now” button displayed on all page only for mobile.

Result will be like,
Desktop:

Mobile:

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[rutvik_shop]

Hello @britt2lee

If the above code not working please try this code -

Go to the Online Store->Theme->Edit code->Assets->base.css> add this code at the bottom of the file.

@media only screen and (max-width: 767px) {
.rich-text__wrapper.rich-text__wrapper--center a {
    display: none;
}
}

[britt2lee]

Thank you so much! This worked great

Can you please also show me how to add padding under the button for mobile, as it touches the image underneath it at the moment.

[Vinsinfo]

@britt2lee By following the steps shared in previous comment, go to “base.css” file and paste the below code at the bottom of the file to add padding under the button for mobile. Let me know whether it is helpful for you.

.book-now-button {
    padding-bottom: 15px;
}

NOTE: You can change the px value to increase or decrease the padding.

Result will be like,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[britt2lee]

That worked great! Thanks