Solved

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

EdsonAdriano
Excursionist
12 0 4

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?

Accepted Solution (1)

PaulNewton
Shopify Partner
6339 579 1350

This is an 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; }
}

 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


View solution in original post

Replies 6 (6)

PaulNewton
Shopify Partner
6339 579 1350

This is an 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; }
}

 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


EdsonAdriano
Excursionist
12 0 4

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!

EdsonAdriano_0-1696837043594.png

 

Bst1
Tourist
11 0 0

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
Excursionist
12 0 4

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

Bst1
Tourist
11 0 0

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

JeremySkeggs
Excursionist
19 0 4

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