Hi, my name is Dan. In this video we're gonna look at how to disable  and enable things depending on your media query. So what I'd like to do is in my Photoshop diagram here,  this image here is great desktop,  but there's no room for it down at mobile. So I'm going to get it to turn off When it gets down to  that size to do, it's quite easy. Um, I am gonna make sure I'm down at my small size now. Okay, this is where I wanna turn it off.

I'm gonna select on it and I gotta collect the  containing container. You can't turn images off specifically. Um, it's better to turn the whole column off. So I got my column, um, that my image is sitting inside  and I got a couple of options. The easy option is right click it  and go to the one that says hide element. And it just means that I'll turn this off  and it will disappear, um, and not come back.

So that's how yours will start off. Okay? It'll just disappear. And if I preview in my browser  here, let's jump back. Okay, so there's my image and desktop view,  but when I get down to my small view, it turns off okay,  it's completely gone Now. Um, that's really easy.

All that's really happened. Just so you understand what's happening is  that if I go into my code view here  and I look at, uh, where is it there old books. He's in this column here, there he is beginning and open. It's added a class called hidden excess. So just means when I get to the, um, the size of excess,  which is our, uh, 700 or so pixels and smaller hide it,  but when it's not, when it's anything else other than that,  make it viewable again. Okay?

So that's just the little class that turns on and off. So if I wanted to turn it back on,  I could manually just delete that  and go back to live view and it will be back. Another easy way to do it is if I wanna turn it off,  remember right clicking and hide elements the easiest  way, but I could add that class. I could say I would like it dot hidden  at excess please. And to find it back on if you wanna stay in design view. Uh, oh, I forgot.

Can you see I left the column on,  I actually just turned the image off  and added it to the image and that's fine. But now I've got this empty container here  or this column that's kind of stretching up the top here  and pushing my text down. So I'm gonna undo that and I don't wanna do it to the image,  I wanna do it to the whole column there and turn that off. So hidden access. Great. He's gone.

And if I wanna turn the back on  or view a page, uh, to see which bits are hidden, um,  you can right click anywhere on the page  and just go to this one that says Manage hidden elements. What it does is it turns it back on  and it's grayed out to show you where it should be. Okay. And you could now maybe turn off that class, um,  and delete it or it's just a good way. So you can right click again  and I'm gonna manage hidden elements to turn it back off. Okay.

So you can turn things on and off. It doesn't have to be images, it could be whole text boxes,  it could be anything you like. You can turn things on that only appear on mobile. So you might have a DIB tag that's turned off for, uh,  SMMD and LG and they only appear at xs. It might be something mobile specific. Okay?

It might be a map that turns on  and makes it really obvious that people are trying  to find you, um, using their mobile device. Um, so you can turn things on  and off easily by right clicking  and make things hidden so you can easily turn things, uh, on  and off using that hidden class. All right, that's it. See you the next video.