How can I hide an image banner on desktop view only?

Store Design
, , ,

Topic summary

A user wants to display an image banner on a collection page for mobile devices only, hiding it on desktop view. They’re using the Sense theme and have already added the banner to their collection page.

Proposed Solution:

  • Another user provided CSS code to hide the banner on desktop by targeting a specific section ID using a media query (min-width: 750px)
  • The code should be added to the base.css file through the theme editor

Current Status:

  • The original poster tested the CSS solution but reports it’s not working—the banner remains visible on desktop
  • They also asked about the reverse scenario: hiding a section on mobile only, requesting which script to use

Unresolved:
The issue remains open as the suggested CSS fix was unsuccessful. No alternative solutions have been provided yet.

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

Hi all,

I have added a image banner at the top of my collection page —> https://tatt4aweek.nl/collections/semi-permanent-tijdelijke-tattoos.

I only want to display it on mobile, so want to hide it on desktop.

Can somebody tell me how to hide it on desktop?

Theme is sense.

Thank you in advance!

Kind regards,

Team tatt4aweek.nl

2

@suyash1 you also have a solution for this section? You came with an solution in the past for hiding the video on our homepage on desktop.

3

Hello @itmakessemse ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code below:

@media screen and (min-width: 750px){
#shopify-section-template--18112922812680__9c7b88a8-bccc-4410-b473-f415985decf9 {
    display: none;
}
}

Thanks

4

Thanks, I will try this! And how about hiding a section on mobile? Which script can I use then?

5

@Guleria it doesn’t work. Still visible on desktop after adding de script…