Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 4 – Part 3 – Set Up the Media Queries

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

On this site, this is the style CSS file for Lesson 4 and we’re going to set up our media queries. I’m just going to copy that comment, come down here at the bottom and say responsive design. Then I think I’m going to repeat that one more time so this is 1024 px to 801 px, those are my comments.

We begin our @media with shift @media and screen then a condition. We’re going to say max width: 1024 px and our brackets. That screen, yes, I left out the and, right. It could be that NetBeans doesn’t recognize the syntax, it doesn’t really matter but let’s open up this one for a second. This is the actual one I have. It doesn’t recognize the syntax so that’s okay, we won’t worry about that. I strongly advise people to use an error checking code editor. However, sometimes, code editors just don’t keep up with the times.

Keyword Only

There’s one other thing that I forgot to mention and that’s the keyword only. If you preface the screen with “only”, it essentially forces older devices to ignore the rest of the code. This was probably more important in 2007 when it was conceived than it is right now and you’re certainly going to see examples of where people don’t use only here. My suggestion is to continue to use “only” at the moment and that’s exactly what I’m doing. I’m going to say @media only and if an old device is looking at this, it’s going to ignore all those.

We have our max width of 1024 and on top of that, what we need is a new screen because we are relating to this max width to the browser window but we actually also have to speak to the device. I’m going to put a comma there and enter then I’m going to say screen and. Actually, I need space here too., screen and max device width: 1024 px. Now I’m going to add a second condition and we had the orientation, orientation:landscape.

Screen Conditions

We have two screen conditions. We have the typical browser window and we have the reported device width and orientation. The reason why a max device width is necessary is that Apple devices in particular but also some Android devices do not report screen width, they only report their device width. If we just said max width 1024, this should work just fine in our browser but would not work at all on a Smartphone because it wouldn’t recognize the max width because it’s not reporting a width. It’s only reporting a device width.

This device width is going to become more important later as we add some meta information to the head of our page to prevent Apple devices in particular from scaling the site. If the site is not responsive, what an Apple device does is it just scales the site down to fit inside the device. Everything is smaller and you can zoom in and out and it works just fine but on a responsive site, you don’t want the device to do that. You want the device to show it in its media query width and so this max device width becomes significant there.

Writing Media Queries

Anyway, we’ve got one media query written. We’re going to write two more and this is from 800 pixels to 501 pixels. We’re going to say media only screen and max width equals 500 and media only screen and max device width equals 800. We’re doing the tablet right now so it’s not 500 but 800, max width 800. Instead of landscape, the orientation is portrait. In fact, I should just say that, tablet landscape and this would be tablet portrait.

Finally, we have our Smartphone which is going to be 500 pixels and smaller. In that case, its max device width is 500 pixels and we don’t have an orientation. This could be orientation landscape and we could add another one for the 320 pixel wide orientation portrait however, there’s not really, from my perspective. In this case, there’s no real difference between the landscape and the portrait view of this site.

By the time you get down to 500 pixels wide, all of our widget areas are going to stack on top of each other. Our navigation menu is centered and stacked. Our heading area is smaller than 500 pixels wide anyway and is centered. There’s no reason to add another one below.

If you wanted to design something special for the 320 pixel wide portrait version then you would leave landscape in this equation and you could move on down to portrait. Actually, while we are designing for our thing to work in all 4 of those different views, we’re only using 3 different media queries to accomplish that.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment