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

Store Design
, , , ,
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