Remove buttons from image banner on mobile?

Technical Q&A

Topic summary

A user seeks to hide image banner buttons on mobile devices while keeping them visible on desktop, as the buttons currently obscure their custom banner image on smaller screens.

Proposed Solution:
A PageFly representative provided CSS code to address this:

  • Navigate to Online Store → Theme → Actions → Edit code
  • Search for the base.css file
  • Add media query code at the bottom targeting .banner__buttons with display: none for screens under 767px width
  • Save the changes

Current Status:
The solution remains unresolved. Another user reported trying the same CSS approach without success, indicating the code may not work universally across different Shopify themes. The thread is seeking alternative solutions.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hello! I have made an image I like for my Image banner, but the buttons cover it up on mobile. Is there a way for me to keep the buttons on desktop devices but hide them on mobile?

Here’s my website if that helps: Well Shirt

2

Hi @Parker_Savage ,

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:

Please follow this:

Step 1: Go to Online Store->Theme->Actions >Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

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

Hope this answer helps.
Best regards,
Victor | PageFly

3

I tried this, having the same problem and it didn’t work for me. Any other ideas? Thanks.