Hi, my name is Dan. In this video we're going to disable and enable things depending on your Media Query. What I'd like to do is, in my Photoshop diagram here, this image is great at Desktop, but there's no room for it down in Mobile, so I'm going to get it to turn off when it gets down to that size.

To do it is quite easy. I am going to make sure I'm down at my small size now. This is where I want to turn it off. I'm going to select on it. And I got to collect the container containing content images of this specifically. It's better to turn the whole column off. So I got my column that my image is sitting inside. Now I got a couple of options. The easy option is, 'right click' it and go to the one that says 'Hide Element'. That just means that - I'll turn this 'off' - it will disappear, and not come back. So that's how yours will start off, it will just disappear. And if I preview in my browser here Jump back. So there's my image in Desktop view, but when I get down to my Small view it turns off, it's completely gone. That's really easy, all that's really happened, just to understand what's happening, is that if I go into Code view here and I look at 'old-books', he is in this column here. Here it is, beginning, and open, it's added a Class called 'hidden-xs'. Just means that when I get to the size of xs, which is our 700 pixels, and smaller, hide it, but when it's not, when it's anything else other than that, make it viewable again.

So that's just the little Class that turns on and off. So if I want to turn 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-- I forgot to turn it off. Remember, right clicking and Hide Elements is the easiest way. But I could add that Class, I could say, I would like the dot hidden at xs, please. And to find it back on, if you want to stay in Design view-- oops, I forgot, can you see, I left the column on. I actually just turned the image off, and added it to the image. That's fine, but now we 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 going to undo that. And I don't want to do it to the image, I want to do it to the whole column there, and turn that off, so dot hidden, xs, great, he's gone. And if I want to turn it back on, or view a page to see which bits are hidden ,you can right click anywhere on the page and just go to this one that says 'Manage Hidden Elements'.

What it does, it turns it back on. It's grayed out to show you where it should be, and what you could now, maybe turn off that Class. I'm going to delete it. Just a good way. I'm going to right click again, and I'm going to 'Manage Hidden Elements', turn it back off. So you can turn things on and off. It doesn't have to be images, it can be text boxes, it could be anything you like. You can turn things on that only appear on Mobile, so you might have a div-tag that's turned off for sm, md, and lg, they only appear at xs. There might be something Mobile specific. It might be a map that turns on and makes it really obvious if people are trying to find you, and you're using your mobile device.

So you can turn things on and off easily by right clicking, and make things 'hidden'. You can easily turn things on and off using that hidden Class. All right, that's it. See you in the next video.