Hide Section On Mobile CSS Code Not working

Technical Q&A
,

Topic summary

Issue: CSS media queries added to base.css failed to hide an image banner on mobile for a specific product page.

Attempts: Multiple CSS snippets targeting the section ID with @media (max-width ~749–768px) were tried. Typos in selectors (e.g., “displa y”, “sect ion”) and the CSS not appearing in the page source suggested the rules weren’t being applied.

Troubleshooting: Confirmed edits were on the live theme. Inspection showed the CSS was not loaded, indicating a placement or loading issue rather than rule specificity.

Solution: Adding the media query directly before the closing tag in theme.liquid made the mobile hide work immediately. This places the CSS inline at the layout level so it applies sitewide.

Recommendations: For broader or maintainable application, use theme.liquid or, preferably, the theme’s “Custom CSS” section in the Customize settings to avoid editing theme.liquid directly.

Notes: Code snippets (CSS media queries targeting the section ID) are central to understanding. Status: Resolved; the banner is successfully hidden on mobile; no further open questions.

Summarized with AI on January 4. AI used: gpt-5.
1

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; }

}

The page in question is

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

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

1 Like
2

Try:

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

Thanks for the reply. It didn’t work :disappointed_face:

4

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

5

Changes are being made to the live theme

1 Like
6

I am not seeing the css in your source code. Maybe you can add

right before the closing tag in your theme.liquid file.

7

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?

1 Like
8

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.

1 Like
9

Shopify code is blasphemy