Getting Started with Media Queries in HTML/CSS
Using media queries, particularly in combination with the viewport HTML meta tag, is essential to making your site layout responsive. It may seem daunting to make your site responsive but it's easy.
There are a couple ways of going about it: one is to use a viewport like [HTML] <meta name="viewport" content="width=640">. This will cause mobile devices to render the page as if the devices width was 640 pixels.
Another is to use [HTML] <meta name="viewport" content="width=device-width">. This will make the device load the page without guessing your pages scale. Your CSS media queries handle the rest.

[CSS] #content { width: 80%; margin: 0 auto; } @media (max-width: 640px) { //These rules will apply UP TO 640 pixels width. #content { width: auto; margin: 0; } }

In this example, a block element with the id "content" would have a width of 80% and be centered, but when the page is 640 pixels or fewer, it will be 100% width.
pending review
Posted 2015-01-01

Courtney {1}
4 snippets
Joined 2015-01-01
Hello! I'm from Toronto and programming is what I do. I've used C, PHP, C#, Java, JavaScript, and a few scripting and pseudo programming languages. Lately I've been learning the power of regex. I created Peerfectionist to be a user-centric code sharing site that promotes quality and pride in one's work. I will continue to work hard developing this site over the coming years.

Log in to comment!