Hide The Section On Mobile CSS Code Does Not working

Technical Q&A
,

Topic summary

A user encountered issues hiding an image banner on mobile devices using CSS code in their base.css file. Previously successful CSS media queries weren’t working for a specific product page.

Problem Details:

  • CSS code added to base.css failed to hide the banner on mobile
  • The target element was a section with ID containing “shopify-section-template–image_banner”
  • Standard @media queries for max-width 768px weren’t taking effect

Solution:

  • PageFly support identified that the CSS wasn’t appearing in the source code
  • Recommended placing the CSS code in theme.liquid file before the closing </head> tag instead of base.css
  • This approach successfully resolved the issue

Additional Recommendation:
For future similar issues across multiple pages, using theme.liquid works, but checking the theme customizer for a “custom CSS” section is preferable to avoid directly modifying theme.liquid files.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
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; }

}

1 Like
2

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?

1 Like
3

thank you

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

4

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

5

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

1 Like
6

It didn’t work :disappointed_face:

7

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

8

Changes are being made to the live theme

9

I am not seeing the css in your source code. Maybe you can add code below before the closing tag in your theme.liquid file.
1 Like
10

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?

11

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