Make Custom Changes to Mobile and Desktop Separately

laurenfrancis
Tourist
6 0 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!

 

Reply 1 (1)
made4Uo
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 Made4Uo.com

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