How to hide a banner picture on a mobile view website?

Store Design
, , ,

Topic summary

A user wants to hide a banner image that appears below their shop text when viewed on mobile devices.

Two solutions provided:

Both responders suggest adding custom CSS code to hide the banner on mobile:

  1. Navigate to Online Store → Theme → Edit code
  2. Locate and open the base.css file
  3. Paste CSS code at the bottom of the file that targets the banner element with display: none

The solutions differ slightly in their media query breakpoints (767px vs 768px max-width), but both use the same approach of hiding .slideshow_media.banner_media.media elements on smaller screens.

This is a common Shopify theme customization requiring basic CSS knowledge. The issue remains open pending confirmation from the original poster.

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

I’d like to hide the picture that is under the text of my shopify website in mobile view. Here’s my site:

2

Hi @anpanman

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file base.css

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

@media (maxx-width: 767px){

.slideshow__media.banner__media.media {

display: none;

}

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

Hello @anpanman ,

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 (max-width: 768px) {
.slideshow__media.banner__media.media {
    display: none;
}
}

Thanks