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

Store Design
1

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?

2

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 :disappointed_face:

@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; }
}
1 Like
3

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
EdsonAdriano_0-1696837043594.png343×725 18.3 KB

1 Like
4

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

5

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

6

Hi, I eventually managed to do it thank you :folded_hands:t3:

7

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

8

Try this:

Hide on Mobile:

@media screen and (max-width: 749px) {
  div {
    display: none !important;
  }
}

Hide on Desktop

@media screen and (min-width: 750px) and(max-width: 989px) {
  div {
    display: none !important;
  }
}
@media screen and (min-width: 990px) {
  div {
    display: none !important;
  }
}

This makes all

tags within this section invisible (effectively making the sectipon itself invisible)