An option to display certain sections for only desktop, mobile or both

[EdsonAdriano]

Is there a way to code it so that when using a banner section or image, you can chose the option to either show it on both desktop and mobile or on one of the two? I have seen this on this YouTube video:

https://youtu.be/dvf1zq7gVV8?si=mP3fRAxj64XZthgR (Make specific section for mobile or desktop only).

I however cannot seem to make it work on Dawn 11.0 because I cannot find the specific code lines to adjust. Can anyone help me out?

[PaulNewton · Accepted solution]

You don't have to edit theme code for this use custom CSS settings

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css 

For example use the following to hide a section on moble in it's custom css setting by using a sections ID selector (replace section-id with your sections ID attribute value😞

@media screen and (max-width: 749px){
  #section-id { display: none; }

 the inverse hide on desktop

@media screen and (min-width: 750px){
  #section-id { display: none; }
}

[EdsonAdriano]

This worked like a charm so thank you very much! What I did was Admin> Store> Customize> Selected the section I wanted to be on desktop only> Costum CSS> Paste the code without #section-id. Doing it this way allowed me to not have to search for the section ID and still have it working the way it was supposed to. Thankyou!

[Bst1]

Hi I tried this on dawn 12.0.0 and it’s didn’t worked ☹️ you know why? I did exactly what you said

[EdsonAdriano]

I am currently still on dawn 11.0 so I haven’t tried this on 12.0.0. 

[Bst1]

Hi, I eventually managed to do it thank you 🙏🏼 

[JeremySkeggs]

What was your solution, as this is not working on Origin 14.0