Hiding Section on mobile / desktop stopped working

Store Design
,

Topic summary

A store administrator encountered an issue with CSS code that was previously working to hide different image banner sections on mobile versus desktop.

Original Problem:

  • Used CSS media queries to hide one banner on mobile and another on desktop
  • Code worked successfully for a couple of days, then suddenly stopped functioning
  • Section IDs remained unchanged and appeared correct

Attempted Troubleshooting:

  • Verified section IDs were still accurate
  • Changed the page template’s JSON name to see if that caused the break
  • Could not identify the root cause

Solution Implemented:

  • Instead of fixing the broken CSS, removed one banner entirely
  • Kept only the desktop banner (with “small” height property)
  • Added custom CSS with a media query to change the height property to 100% on mobile (max-width: 749px)
  • This effectively makes the single banner adapt to both mobile and desktop views

The issue remains unresolved in terms of why the original hiding code stopped working.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
2

Since I still couldn’t find the reason that caused the code to break, I found another solution instead.

Luckily for me, both images are the same, but the desktop one has the height property “small” while the mobile one has the property “fit to image”.

I removed one banner, kept the one with the small property and added this to the Custom CSS, to sorta “change” the property on mobile:

@media (max-width: 749px) {
  .banner__content {
    height: 100%;
  }
}