How to turn off parts of a website in different views like mobile or desktop.

In this video we're going to disable this Ruler here when it gets down to Mobile because that's what I've done in my design, so let's go and do that.

So what we're going to do is, we're going to make a Compound Selector, but we're going to do it inside Mobile because that's the only time I want this thing to activate. So in 'styles.css', when I'm at Mobile, I'd like-- I don't have anything that controls the Ruler yet. So I'm going to say, if there's a-- I could just have HR and turn it to disable, but if I use a Ruler anywhere else, it's going to turn off as well. So I'll be a little bit more specific, so I'm going to say 'hero-content'. So if there's a Horizontal Rule inside here, a Content, then I want to disable it. So sometimes I'd probably get away with just HR.

Am I going to use another Horizontal Rule anywhere else in this site? I think I do, so yes, I don't want to turn it off. So, this specific Ruler that's inside this Content Box here is going to be disabled when-- make sure Show Set's off. So you can see everything, I want to go to 'display' and go to 'none'. Hit 'Save All', check in the browser. You can see here, in Tablet, hopefully, Mobile-- sorry, Tablet's still there, and then Mobile, gone. Easy.

Couple of things I want to tidy up, is maybe there's some Padding down here. In the earlier tutorial, I was looking very clever and I said, "Let's use the Horizontal Rule for the Padding." So we use that Style to give this gap between this in the Button, but because we turned the Ruler off, that styling disappears. So I want to add a bit more to it, plus I want to push this off from this side. So let's go and do that now in Dreamweaver.

Let's go down to-- let's view, so I can see it. So 'Mobile', there he is there. And he gets disabled. Now-- is he disabled? For some reason he's not disabling here in Live view. That's why I prefer to test in the browser. There's just some little quirky things that don't happen in Live view. It's handy for selecting stuff but don't use it as your absolute, 100%, finished work view. Use the browser for that. So what I'll do is, I'm going to make a Compound Selector, so when I am at-- when there's an H1, and it's down in Mobile, I would like to add a bit of Padding to the bottom. So I do have an H1, that's in Mobile already, so I can sneakily use this Selector already because I'm in 'style.css', I'm in my 'Mobile Styles' and there's already an H1, so I can say "Hey, when I get down to H1, can you add a bit of Margin down the bottom?" Now I'm guessing at the moment, because that line—

Hey, there he goes. He's disappeared. This could be just my program, I end up having like early testing versions of Dreamweaver to help bug effects, and to make videos for Adobe, but sometimes mine goes a little bit bunk. So, let's test that in a browser. Yes, looks good. So, you, you , you… And what I'm hoping is, just little things like that, that kind of like little-- I love those, those little tweaks happening, and you're like "Oh, I wish I could." "There's already a Tag." "I can adjust that one." You stop creating Classes to do everything, and start re-using Classes.

Another thing I want to do is, this guy at the top here, I need to push a bit of Padding to the left to fake it to center. Because these are floated to the left it's really hard to naturally get them to center like we did with this Text and the Button. So we're going to actually just say-- this thing here called 'image float-left' that is inside the Hero Content. So, let's select on him, let's create 'CSS Designer' panel, 'css styles', 'styles.css'. We'll do it Globally, actually no, we'll do it in Mobile. Just check we don't have anything. Do we have anything that says HeaderA image? No. So there's nothing in here. Let's go and create one, so it's, add 'Selector'. Now that's not good enough. Anything that's got Float Left applied to it inside our Hero Content is going to add this Padding. And at the moment, it's only this Image. Actually both of these Images, so it's not going to work. Because they both get some Padding on the left hand side. So we're going to have to be a bit more specific.

Now, weirdly-- welcome to the weirdly world of web. If I do, say 'img' here, that's not going to work. It's not the way that this is constructed. So let's add it, let's go over here and add some Margin. Just clear some Margin for the moment, but obviously nothing's changing. That has Float Left, that's inside our Content Box. So maybe it's the other way around. So maybe it's the Image, 'img' that has Clear Float applied to it. But it still doesn't work. It's because these things are kind of stuck together. This Clear Float is attached to this Image so there can't be a space between here. This will catch you out, catches me out. It's one of the fun things where Image and then a dot '.', that means those two are actually joined and connected to each other. Now it's going to apply it. So, with that, I'm going to draw it. Nice!

We've learnt a couple of things, and I have a tendency, when I'm making a course, just to keep nice and simple and make sure there's not anything too difficult like these kind of weird things where there's one instance where we've joined these two and we've not been able to center it, because they're Floated but I'm leaving this particular one in because it's just times where things that are meant to work don't work and you find little workarounds to get them going. Happens to every Web Designer. What I should do is potentially go back to the beginning and kind of restructure how I make this site so that I don't particularly have this one problem, but nobody does that, it's kind of, you get to a point where you're like "Ah, do I double back just to fix that one thing, or do I make a little hacky thing to fix it up?" This is not particularly hacky, but just to let you know there are times you're like—

Actually I'm just going to add a Class to kind of fudge it, because often there are no repercussions. Looks good for the user, the user experience is great, the UI looks good, everybody is happy, but if somebody looked at your code, they might look at it and go "Dan, that's an ugly way of doing that." And I'd definitely say that, if you're a developer and you're looking at my code you'd be horrified to see the word 'Hero Content' all written down with hyphens, they probably just put 'HC'. Keep it nice and simple, keep the code really light weight. I like to write little notes to myself with my Classes, like 'Hero Image' and 'Mobile View' but that's just my style and I guess, coming from more of a visual background I need to see those things, and the code to help me out.

All right, so that's it for this video. Let's get on to the next one where we start looking at Image Columns.