Hide The Section On Mobile CSS Code Does Not working

[pmhkook]

I have used multiple codes found online and none of them are working to hide my image banner on mobile. I have been adding them to my base.css file.
I have previously used the codes below to hide an image banner on other product pages and have worked flawlessly but this page won't work.

The codes I've tried:
@media screen and (max-width:749px){
#shopify-section-template--21897093513515__image_banner_df3LJy {display:none; visibility:hidden;}
}

@media (max-width: 768px) {

section#shopify-section-template--21897093513515__image_banner_df3LJy { display: none!important; }

}

[PageFly-Amelia · Accepted solution]

I am not seeing the css in your source code. Maybe you can add code below before the closing </head> tag in your theme.liquid file. 

<style>
@media screen and (max-width: 768px) {
  section#shopify-section-template--21897093513515__image_banner_df3LJy {
    display: none !important;
}
}
</style>

[PageFly-Amelia]

Hello @pmhkook 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

Could you please share the URL link of your store so we can check it for you?

[pmhkook]

thank you

 https://purelynaturalapothecary.com/collections/shop-all/products/focus

[pmhkook]

The top image under the scrolling green bar displayed on mobile needs to be hidden 

[PageFly-Amelia]

You can try the code I have provided to help you solve the problem you are facing:

@media screen and (max-width: 768px) {
  section#shopify-section-template--21897093513515__image_banner_df3LJy {
    display: none;
}
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[pmhkook]

It didn't work 😞

[PageFly-Amelia]

Are you making changes to a preview theme or the live theme? I was going to inspect the site for the changes.

[pmhkook]

Changes are being made to the live theme

[PageFly-Amelia · Accepted solution]

I am not seeing the css in your source code. Maybe you can add code below before the closing </head> tag in your theme.liquid file. 

<style>
@media screen and (max-width: 768px) {
  section#shopify-section-template--21897093513515__image_banner_df3LJy {
    display: none !important;
}
}
</style>

[pmhkook]

YES!! That worked!! THANK YOU!!!

Would you recommend using that code in the theme.liquid file for other pages I am having this issue with?

[PageFly-Amelia · Accepted solution]

Awesome, I am glad to hear it! You are very welcome.

Yes, if you have tried base.css then theme.liquid is the next best place to put code that will be in all pages of your site. 

Although, I would recommend looking through your theme setting sin customize theme, because most themes do have a "custom css" section that you can also add code to avoid placing code in your theme.liquid.