Adding a Media Query for a custom HTML section

Store Design
, ,

Topic summary

A user is trying to implement a media query for a custom HTML section on their Shopify homepage but encounters an issue: the Custom CSS editor doesn’t support @media code. They’re uncertain where to add this code within Liquid theme files.

Attempted Solution:
The user wants to add CSS that:

  • Displays .mobile-worm img as block on screens with max-width 800px
  • Hides .worm img (display: none) under the same condition

Response Provided:
PageFly-Victor offers a three-step solution:

  1. Navigate to Online Store → Theme → Edit code
  2. Search for the theme.liquid file
  3. Paste the media query code at the bottom of the file, then save

Note: Parts of both the original question and response appear corrupted or reversed in the text, making some technical details difficult to parse. The discussion remains focused on finding the correct location to insert custom media query CSS in Shopify’s theme structure.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Looking for solutions as to how to add a Media query for a custom HTML section on my sites Home Page.

The Custom CSS editor box does not support “@media” code and I am unsure of where to add this code to the Liquid files if that is something that I need to do.

This is the kind of css I wanted to add but isn’t accepted:

@media screen and (max-width: 800px){

.mobile-worm img{

display:block;

}

.worm img{

display: none;

}

}

2

Hi [email removed]Someshapestudio,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly