Basic Media Queries with CSS

With the growing number of mobile and tablet users in the marketplace, your website needs to be able to be displayed properly on a variety of devices. A true statistic is that more users engage with their cell phones or tablets than ever before.  You could be losing out on thousands or millions of visits a month just because no one can read your content on their mobile phone.

By now I am hoping you have read my previous article on starting the Responsive Design on your website. If you have not read it, you might want to go check it out: First Steps to a Responsive Design. In that article I described the very first modifications you can make to convert your static design to a fluid design. At the end of the article I told the reader to finish all the modifications effecting the layout of the full scale website. Now I will get into the use of media queries to control what your CSS does to different sized platforms.

Before you can use a media query, you should probably learn what one really is. A media query is a line of code telling the browser to discover the type of "media" (known as platform) that your website is running on. These media queries can be used to determine actual screen size, screen resolution, and even determine pixel sizing. The media queries are can be inserted in the <head> of your HTML document, the inside of your CSS sheet or performed with Javascript. For my example, we are going to be using a relatively easy to incorporate and lightweight design media query dealing only with screen size inserted into the style sheet.

Just to be absolutely clear, there are several different ways to utilize media queries and several different ways to implement them. If they are added to the top of the HTML document inside of the <head> tag, the media query is used to request an additional style sheet. In my opinion that would be an incorrect way to accomplish what we want. This additional style sheet adds at least one HTTP request to your site upon loading. Also, the browser downloads all linked style sheets regardless if the particular screen size required fits your device. Adding your media queries to your base style sheet eliminates that requirement.

I am going to provide you with some basic media queries to add to the bottom of your style sheet. Adding your required styles in the designated sections will allow the style sheet to overwrite previously declared styles if the media queries return a true statement. In order for these to work properly, you do need to set a media viewport in the header of the html document.

@media (min-width:1px) and (max-width:979px){ }

@media (min-width:1px) and (max-width:480px){ }

@media (min-width:1px) and (max-width:320px){ }

You should use code the entire top section of the CSS to be displayed on large desktop screens.  Then, at the first media query is where you should put your base style sheet mods for all tablets and mobile phones. Most people should use this area to eliminate floating properties so that items are displayed inline on a smaller screen, such as moving the sidebar down to the bottom of the screen and not floating text around larger images. You want to make these CSS overrides as streamlined as possible and avoid handing every detail of your site through it.  The base mods include code that could also be modified in the second and third media query depending on circumstances.

The second line of code is where you would want to put the style mods for your normal to large size mobile phones and small tablets. The last line of code is where you should put all the style mods for basic to small phones. This size includes some of the older phones like a Iphone 3gs, 4s and other phones near the same era of mobile phones which hopefully is a dying breed.

Generally people building responsive websites are also using responsive ads.  Responsive Adsense ads can have their sizes selected by media queries and therefore should be placed inside of the block quotes.  You will need to do some research into common view port sizes for phones and adjust your website.  The sizes specified in the media queries can be easily changed by changing the number next to the command.  Speaking of view ports, I mentioned earlier that you need to add some code to the top of your webpage.  In Joomla, you add this to your base template php file.

<meta name="viewport" content="width=device-width, user-scalable=no" />

If you are having a hard time understanding what I mean, you should take a peek at the style sheet of this website. To do that, fire up Firefox and use Firebug tools to view the style sheet files. The media queries are at the bottom of the style sheet.