Make Custom Changes to Mobile and Desktop Separately

Shopify Discussion

Topic summary

A user working with Shopify’s “Showcase” theme wants to edit mobile and desktop versions independently or show/hide specific sections based on device type.

Attempted Solution:
They tried adding custom CSS using media queries with .show-mobile and .show-desktop classes to control visibility, but received an error message stating “At-Rules are not permitted” when inserting the code into the Custom CSS box.

Response:
Another user provided a YouTube video link as a potential solution for implementing device-specific section visibility.

Status:
The discussion remains open with the original poster awaiting a working solution to either separate the mobile/desktop editors or successfully implement CSS-based conditional display.

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

Hello!

I am currently using the “Showcase” theme. I am hoping to edit the mobile and desktop versions of my site separately. Is there a way to un-tether the two from each other in the editor? Alternatively, is there a way to have some of the sections on a page appear only on the desktop and have some others appear only on the mobile?

I have tried to insert the below custom CSS into the “Custom CSS” box but received an error message that At-Rules are not permitted.

.show-mobile { display: none; }
.show-desktop { display: block; }

@media screen and (max-width: 798px) { 
  .show-mobile { display: block; }
  .show-desktop { display: none; }
}

Thanks so much in advance for your help!

2 Likes
2

Hi @laurenfrancis ,

You can follow the video below to do this on any sections