Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding basic web principles
- Adding content to a web page
- Linking to web sites and email addresses
- Styling content with CSS
- Creating a layout that fits multiple browsers and devices
- Building an HTML5 layout
- Inserting images and video
- Adding a menu bar
- Creating a contact form
- Integrating a Twitter feed
- Uploading and testing a web site
Skill Level Beginner
It's becoming increasingly important to make sure your content looks great across screens, everything from your desktop to a tablet to a mobile device, and it's only going to get more important. So how does this look across different screens? Well, I can view this in a web browser how I've been doing, but another thing I can do, with the Live View on, I can go ahead and just resize this index.html, and look what's happening. This is the window size right here. I can see what it looks like. That gives me the exact positioning of everything and the exact size of that window.
So I can scale it down that way to see how that looks, or I can click these options right here to see the Desktop size, to see a Tablet size, so 768x1024, and that looks pretty good, and even down to a Mobile size. So that's the 480x800. So it's a great way to quickly see what your content will look like across different devices. I'll turn off that one, and know that right in here for this Window size, you can pick different sizes as well or even edit them.
But in this case, everything looks pretty good except for when I get down to this smaller size. Look what's happening. On a mobile device, look at this, this text is being cut off. In fact, I think I can scroll over to see it. This content isn't using efficient use of the space. So I need to start modifying this appropriately for these different screens. And how I'm going to do that is I am going to use media queries, specifically one media query that will query the device even the browser, and it's able to determine the size of that browser window, and then it will use the appropriate CSS depending on that screen size.
And in order to that, we can go to Modify, down to Media Queries. Media Queries is what I'm picking. And I am just going to write a media query to this document. That's where the media query is going to exist, make sure that's checked to force the device to report the actual width, and right down here this is where I can add as many media queries as I want to. I'm only going to add one. So I am going to click this plus sign, it's going to add one. Right down here I can say hey, you know what? Let's make this for mobile. I can say whenever the Maximum Width is about 800 pixels because this is for mobile.
I can use an existing file, but I don't have one. So I need to create a new one, clicking that folder. Now remember this stylesheet.css exists, it's actually in my CSS folder, so that right here that's where that exists so that's where I actually want to put my mobile.css as well, my new mobile.css. That initially is not going to contain anything. So that's what I've implemented that media query that will query the device. If it's the Maximum Width is 800 pixels, then it will show the CSS in this file, so I am selecting OK. All right! That's implemented.
You can see my original style sheet and then my mobile.css. But let's take a look as I go to this Split view. Right in here, here's the media query that's implemented, it says hey, you know what? We are going to use this CSS file whenever the Max Width is 800 pixels. So that's what it implements, and then I can take a look at this CSS. All right! Now it's not going to do any good. I need to pick out the elements that I want to change for my mobile.css.
So I am going to be taking items from my stylesheet.css which initially gets applied. So let's take a look at this. Here's my stylesheet.css. All of these styles will get applied, and then I can overwrite them by whatever styles I put in this mobile.css. So let's take a look. As I start to resize this down, the first thing I am going to do is this section, I actually want it to expand all the way over. So I want it to be 90% instead of 60%. So that's what I want to do.
And I also probably want to fix this text, so it wraps to the next line. Those are just couple of the things I am going to do, and in fact, as I take a look at this, I can go into my Source Code, it might be easier to check out the different CSS as I can see right in here, the selectors. This section is what I need, so an easy way to do that is right-click and just say hey, go to that code.
It'll go to that stylesheet.css and right here here's that section.css. Well, this is what I want, so I can easily select all of this code right here and copy it. Then I can go to my mobile.css and hit Return and then right-click and paste it in. From there, in fact if I click Refresh, notice how mobile.css has that section in it. Now I can manipulate this, a couple of different ways.
Quite frankly, I can double-click on it and change the Rule definition in here, if I want to. So I can change the Box Width to 90% just like that, or I can actually type it in right here. In fact, I am going to change the Width to 90%. I don't want it to float to the right. Okay, so I am going to select None. In fact, if I take a look even at the Positioning, I can see the Placement, it's going to be 5% from the right side, and I probably want it to be 5% from the left side.
So I am doing everything in this panel. As I click OK, you can see it applied those changes and implemented it right over here. So I can just as easily start to manipulate any of these properties in here as well. Say for instance even as I scroll on a mobile device, I want as much contrast as possible so this text is easy to read. So I want to get rid of that transparency. So right in here, for the background- color, this .8 is your 80%. I can change that to 1 just like that, clicking there.
And yes, that is very legible. And again, if you are on a mobile device, and you get some sun glare, it's still going to be pretty easy to read that text, okay? So that's what I have done, that looks pretty good. I like how I've implemented this and overwritten anything that was applied from the style sheet, basically customized for mobile. Now it looks good, so I will save that. The next thing I need to tackle is this text right here, okay, because as I size that down, that text gets cut off. So I need to wrap it to the next line.
So if I take a look at that in the stylesheet.css right in here, that's actually my header that I'm dealing with. So I can Go to Code which will take me to that stylesheet.css, I can copy that, go to the mobile.css just below that, hitting Return a couple of times, clicking Paste, pasting that in. And now I can change mainly the Width. So the Width, I want to the say hey, you know what? As I scale it down, when it hits about the size right here--see how it overlaps, kind of gets cut off right there? Well, that's about 680 pixels wide.
So maybe at that point, that's when I want that to change. But really what I want to happen is kind of, you know, I want this style sheet to be implemented when it gets about that size, but really I want it to wrap to the next line about 480 pixels. So that's the size of the box is like this size. So I am going to change this from 680 to 480, like that, click again here, and it wraps to that next line.
So let's scale it, it goes from there, hits that 800 mark, which will implement the mobile.css, and then it wraps to the next line. So a couple of tweaks I need to do here. The first thing I notice is this panel needs to move down more. Well, how would I do that? Well, that's the section here, if I take a look. Well, moving it down from the top right here, I can go ahead and change that to 260, refreshing, and you can see it's moved it down, this has plenty of space.
Another thing I noticed--and really this is the last change I want to make here-- is this text gets hard to read and really backgrounds in general might not be the best thing to do on a mobile device, because you want to just focus on the content and focus on these quick 2-minute tasks that people are doing while they're waiting in line or in a plane with their phone during a commercial. So I actually want to not have that content scale back there. So I still want that nice gradient, a nice background, but I don't want it to scale and thus make this text illegible. So I need to take a look at that background.
If I take a look over here for the body, right down here the background-size is set to cover. So let's go right-click, Go to Code, here's my body right here. I can take this, copy it, go to my mobile.css, paste to that in just like that. And I am going to change the background-size from cover to something else. And there is a couple ways of doing this. I can come over here and select it right in here. In fact, I can change that Auto.
Another way to do it is you have code hinting right in here, so I can just go with that colon, and you can see how that pops up, auto, so I can select it that way, hit Enter, and there's my semicolon. So as I click in here, you can see that it changes, and it doesn't scale down that background. So much easier to read, so much more appropriate for a mobile device as I scroll up and down. Now keep in mind, technically since I'm not changing these other elements, I can always get rid of them.
And it's often a good idea to do so because it just means more lines of code that you don't need so I can jump in here, start getting rid of that, getting rid of this line and anything else that I didn't change. So for the section just like that, the floating, the padding, I didn't change any of that. You can really start to slim it up and eliminate a couple more lines right in here, in fact, these three. And look, this is all I've done. I have just manipulated these properties.
Now keep in mind, this is a separate CSS file, has that little asterisk, says hey, you know what? I haven't been saved yet. So always just save all related files just like that, and you could always hit the Refresh button which you can easily see how that's implemented. But let's take a look because I actually did eliminate something that I actually should've kept in here, and it's actually has to do with the section. So if I go down in here to the section, and the thing that I actually need to fix is the float, okay. So that's something I actually eliminated that I didn't mean to.
So I am going to change this to None just like that. All right! There we are, it's nice and centered, everything looks good. I can save all my related files, I can view it right in here if I want to, watch that scale up and down, I can even view it from Desktop to tablet, clear down to mobile device. You can see how everything is laid out. So that's how you can easily take your current content and actually restyle it so it fits appropriately. Regardless of the screen size, you can implement as many media queries as you want.