how to hide a section on desktop only shopify

hey scott austin here in this video i'm,going to show you how in the flex theme,you can take a any given section that,you're showing on the home page a,product or a page where wherever you're,using a section and you can say this,section,i only want to show it on desktop or i,only want to show it on mobile,and let me show you an example of how,that works so here i am on the home page,of fit my foot,and i've got these pressed logos and,there's 10 of them on desktop,and you'll notice when i switch to the,mobile view there's only four of them so,i use this hiding and showing between,desktop and mobile,um to make that happen to show 10 on,desktop and,four on mobile let's go on the back end,and look at theme customization what,you'll see,is over here on the home page i've got,two logo lists,this is the one with 10,and this is the one with four logos in,them now if we click on the one with 10,over on the right where we have the,details for the section if i scroll down,you'll see this css class,and i,typed in show desktop,on the,mobile version,i typed in show mobile,so by adding that css class right there,that's what's hiding on on mobile the,desktop one so the desktop one is shown,on mobile hidden on desktop,and the,logo list for the mobile where it says,show mobile that is shown on mobile and,hidden on desktop,now,the flex theme has css classes that,automatically do this but i always,forget the naming of them because,they're not as intuitive to me as show,mobile and show desktop so i always just,make my own and it's really easy to do,it's just a few lines of code,so here in my i always make a custom css,file right so you can see here i have a,jadepuma.css.liquid file so i don't edit,styles.css.liquid you know which is the,themes css file i only edit or i add,additions to css in my custom file so,here,is you know the few lines of code it,takes to do the show mobile and show,desktop functionality,where on the normal displays this is you,know on desktop,uh we're hiding the mobile so display is,none and we're showing the desktop,display is blocked and then when the,screen is less than 798 pixels then,we're showing the mobile and we're,hiding the desktop display is none for,desktop now the flex theme has three,major break points or two major break,points for three major screen sizes so,they have the mobile and the break point,for mobile is 480 480 pixels and then,they from between 480 pixels and 798,pixels that's the tablet screen size and,then desktop is anything at 799 or over,so here you know i could have had a show,mobile show desktop and show tablet but,that just means you have to think more,and and add the right elements in,you know you would you would add show,mobile css class and show tablet and,it's just too confusing to remember so i,keep it simple there's just mobile and,desktop and in this case i've designated,that,mobile also applies to tablet if i,wanted mobile to only apply to mobile,and assign tablet to desktop then i just,change this,max width uh here right so now i want to,use this sort of functionality the min,width of 481.,so it changes max width 798 pixels to,min width uh 481 pixels and that means,any screen size 481 pixels or greater,which is both the tablet and the desktop,um,would then be in in that bucket,so,you can set this up any way you want and,you can you know change change the,numbers,or the screen sizes the pixel width to,suit your particular need and that's why,i like you know creating my own code for,this once again instead of using the,code,inside of the css file that's built into,the flex theme if we go over to that css,file you'll see here they've got uh,is hidden uh or is hidden desktop only,is hidden mobile only i like the show,because it's more of a positive we're,hidden as the negative and it makes me,have to think an extra step and the only,always confuses me because,they're actually doing it for desktop,their mobile and tablets that's why you,know you can use these css classes if,you want is mobile is hidden mobile only,and is hidden desktop only and they work,fine,um but i always get confused by those so,that's why i make my own,and let's just show you one more thing,here if you're going to create your own,css file,which i highly recommend you do if,you're you're editing your own,theme,right let's go into our theme.liquid,and just show you really quickly here,what you want to do is whatever the,theme.liquid is doing to styles.css and,it loads styles.css two different places,right here's a preload,and then here's the actual loading it as,a style sheet so wherever you see the,styles.css,after it not before it after it so that,your css file will override the themes,css settings,um you want to add whatever the line,above it for style css was copy and,paste it and then just place your css,file name there instead and you can see,here i did that in two different places,so that'll get your that'll get the,styles.css to load up first which has,you know most of the css for the theme,and then you know the fewer you know,your your file is going to be much,smaller so it'll just override any,particular settings that are set in,styles.css,when when you load it up afterwards,because that's the way the the cascading,logic works in css files,so then in theme customization right you,can just change you know you can add,that css class show mobile or show,desktop,um as you want and then,a lot of times i will you know in this,situation i wanted to show 10 and four,and if i go here to the mobile,you'll see the the four show up so i end,up using this a lot um because there's a,lot of sections in uh the flex theme,that aren't as responsive as you want,them to be or as i as i want them to be,um like this one here is actually pretty,responsive right the,image with text,overlay because we can put in a mobile,image and a desktop image so that's,pretty good,um but sometimes i want different text,on mobile and desktop and i can't do,that within this section so i'll create,two instances of the section with the,text for mobile and the test the text,for desktop different and then use this,show desktop show mobile css class,to have it show up on the appropriate,screen,so hopefully that all makes sense for,you let me know if you got any questions,thanks for watching

Congratulation! You bave finally finished reading how to hide a section on desktop only shopify and believe you bave enougb understending how to hide a section on desktop only shopify

Come on and read the rest of the article!