Can't make a section disappear on mobile

Store Design
, , ,

Topic summary

A user is experiencing issues with CSS code that previously worked to hide sections on mobile devices. The code successfully hides a section on desktop but fails to hide a different section on mobile.

Problem Details:

  • Using custom CSS in base.css with media queries
  • Desktop hiding works: @media (max-width: 768px) for slideshow section
  • Mobile hiding fails: @media (min-width: 768px) for image banner section
  • Website: leorel.com product page

Solutions Provided:

Two community members offered fixes:

  1. Script-based solution: Add JavaScript code to theme.liquid file above </body> tag to hide specific section IDs

  2. Corrected CSS: Fix the media query syntax and structure, ensuring proper bracket placement and !important declarations

Outcome:

  • User confirmed the solution worked successfully
  • Issue appears to stem from CSS syntax errors in the original code
Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
4

Here is the corrected code:

@media (min-width: 768px) {
  section#shopify-section-template--22666655236431__image_banner_whcdbA {
    display: none !important;
  }
}

@media (max-width: 768px) {
  section#shopify-section-template--22666655236431__slideshow_74accQ {
    display: none !important;
  }
}
1 Like