Subscribe or Login to watch video

Login or Subscribe to watch video

42 - How to turn images off in bootstrap mobile view using Dreamweaver

Questions & Comments

ron labbe - 2 years ago

Is it possible to override the bootstrap preset media queries? (767 seems big for xs, and the difference between sm and md is relatively minor! thanks

Administrator Tayla Coman - 2 years ago

It's totally possible but I'm unsure how much work it would be.

You'd have to get a copy of bootstrap in un-minified form, find those queries and then change them to your preference.

Alternatively you could just overwrite exactly what you want to happen specifically in your own stylesheet. But what you're asking is possible yes.

Stephen Fawcett - 8 months ago

If the image is responsive anyway, why turn it off?

Administrator Chris - 7 months ago

Hi Stephen

Normally the reason to remove an element on a small screen comes down to a few factors 1# Style on a small screen, the overall style does not always work with all elements of a desktop design 2# optimizing load on smaller screens, With users viewing more and more on smaller handheld devices the more images that are on the page to load the more bandwidth/data they will use 3# if your design is image heavy then is often pays to minimize the amount or images displayed to stop the user from having to scroll for long sections of just images.

The feature that is described in the lesson works across other elements as well and it is a handy tool that we have available for us to use as developers.

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

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.

ALL ACCESS: $12 per Month + Cancel anytime