shopify show div only on desktop

hi everyone in this tutorial we're going,to transform any sections that we have,to show the content to,desktop users or mobile users or even,both so i know some of the website,owners just want to,target certain device users so example,you have a section that you want to only,show it to only the desktop users and,also the same as with mobile,what we're going to do here is you can,transform any section of any teams that,you have,to have this feature so this is what,we're trying to do here so if i go to my,refresh theme,this image banner will only show for,desktop users only and also i have this,any device users and if i make this,browser smaller so it would mimic the,smaller devices so if i right click and,click inspect,we will see the screen size in here or,you could also toggle this device so you,could see the smaller device so in here,i have mobile so we lost the desktop,only and i'm only showing the mobile,users only right so when we go back to,our desktop again,it will show any device and this step,only so it will hide whenever there is a,device change,or whenever there is a change in screen,size so it differentiates the desktop,and mobile users and not only that this,is going to be easy for you to do,so let's go and go to our admin page,so in our admin page i added this dom,team we're gonna edit that so make sure,you go on teams and then if you have a,live team just duplicate that live team,and then edit the duplicated team so you,just click actions and hit duplicate but,for me i'm just going to edit this down,team and then click edit code,and i'm going to choose my section so on,that one i have a banner image it really,doesn't matter on what section you want,to edit just follow along,so i'm gonna just expand my screen right,here i'm gonna choose,well we'll do the slideshow actually,go to the slideshow file under the,section folder so open that,and the code works with the first angle,bracket that you're gonna see what i,mean by ankle bracket is this one,so,like if you go right here that is all,curly bracket curly bracket curly,bracket so the first angle bracket that,you're gonna see we're gonna look for,the class and then we're gonna add the,code next to this a quotation mark so,let's go to our website and then grab,that code,so right here click to copy,and then we're gonna ctrl v to paste it,after the quotation mark so ctrl v,and then make sure you make a space,between this curly bracket and then the,next word,so make sure there's a space in there so,you're not gonna have an error and then,next we're gonna go down to our schema,so all the way down,and we're gonna look for this settings,with a bracket,make sure you don't work on the black,settings we're working for a section,settings so the black settings look like,this,so make sure you're not i'm working on,this area,but this area right here okay,and then we're gonna just start a new,line so go next to the,opening bracket and then click enters to,have a new line,and we're gonna go back to our website,and then copy this code right here,and then just ctrl v to paste it in here,so i'm just gonna uh highlight it and,remove it and then click save,and next we have to add this css so this,css file is the one responsible on,hiding the desktop and the mobile and,we're not using javascript here so it's,all css and liquid code,so we're going to go to our asset folder,and we're going to open the base that,css if you're using shopify 2.0 free,teams or any other topic by 2.0 newer,teams it's going to be based at css but,some of the teams have,team.css and team,that stss or even team that css that,liquid but if you have this team you,should be familiar to what is your base,or your common css file,so for me i have base.css so i'm just,gonna go all the way down,we're gonna go back to our website,and then grab this code right here and,just click to copy on that one,and then ctrl v to paste it in here and,i'm just gonna highlight it and shift,tab to reformat and then click save,now i'm just gonna go to our team editor,so to go to our team editor we just have,to right click on the customize team and,then i'm gonna open a new tab,and then,click on this one,and since we edit the slideshow let's,add the slideshow in here so add a,section and i'm going to look for,slideshow,and then click that and then i'm just,going to drag it on the top so when you,click the slideshow word it will open,the section settings,so this is what we added right here so,you have to choose the device that you,want it to show but this one is default,to all devices and then you just have to,click to only desktop device or mobile,and tablet device but let's start with,mobile and tablet device what i mean by,mobile and tablet device is devices that,is lesser than 750 pixels,so in here we're just gonna try to,differentiate them by adding a text i'm,gonna say uh this is mobile,only users,and then i'm just gonna add another,slideshow again,and i am going to,assign this for our desktop users so,click the slideshow again,and then i'm gonna just desktop,and i'm just gonna add a desktop word,right here,and click save,so in your team editor it's just gonna,show,desktop right now,but if we go back to our code editor and,then hit preview in here,we should see desktop because it's more,than 750 pixels so to know if it's more,than or less than right click and then,click inspect,and it will show you the screen size on,the right upper corner of the browser so,let's change the size see that how it,changed so right now it's 8.90 so it's,still gonna be desktop,let's go down to 750. now it's swap to,mobile,so that's all you have to do guys to,edit your section could be a rich text,or anything that you want to have this,feature you can do so,and let me know if you have any,questions,and don't forget to subscribe thank you,so much for watching

Congratulation! You bave finally finished reading shopify show div only on desktop and believe you bave enougb understending shopify show div only on desktop

Come on and read the rest of the article!