Make Custom Changes to Mobile and Desktop Separately

6 0 1



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!


Reply 1 (1)
Shopify Partner
3409 642 966

Hi @laurenfrancis,


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


We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Having trouble?  Hire us! For fast reply, shoot us a message using chat at

Check how to sell everywhere with Shopify POS. Keep your stuffs private. Refrain from giving unnecessary access to your store.