How to hide Hero section on Atelier theme for desktop but not mobile?

Store Design
, , , ,

Topic summary

A user needed to hide a hero section containing a video on their About page for desktop views only, while keeping it visible on mobile. The video wasn’t displaying correctly on desktop due to cropping issues.

Initial Attempt:

  • Tried using CSS media query targeting .hero__container with display: none
  • This resulted in an unwanted black box appearing on desktop instead of hiding the section completely

Working Solution:
Another user provided custom CSS code to add to the theme’s base.css file:

  • Uses a media query for screens 750px and wider
  • Targets the specific section ID with display: none !important
  • Successfully hides the hero section on desktop while preserving mobile display

Resolution: The solution worked perfectly, and the issue was resolved.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Am wanting to hide a hero section that shows a video on my “About” page but only for desktop views, as the video crops/doesnt display right on desktop. SO keep it for mobile, hide on desktop.

I have tried various bits of code from this forum but none have worked.

Closest I got was

@media screen and (min-width: 750px) {
.hero__container {
display: none;
}
}

BUT this just left me with a big black box on the desktop version rather than the video and I dont want that either.

Please help?

website page: – Heavy Metals Jewellery

pwd: snoopy1210

1 Like
2

Hi @JD1992

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
@media screen and (min-width: 750px) {
  #shopify-section-template--17879238541379__hero_9Ktiwe {
    display: none !important;
  }
}

image
image1339×521 135 KB

1 Like
3

You’re a legend, that works perfectly. thank you!

1 Like
4

Hi @JD1992

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts.

1 Like