<div class="page large-header article light raleway pid_7573 page-7573"> <div class="background"> </div> <article> <header> <div class="container"> <h1> Make your website responsive with media queries </h1> <div class="summary"> </div> <p class="byline"></p> </div><!--container--> </header> <section> <div class="container"> <p>Hi there. This chapter delves a bit into the smartest way to make your website responsive for devices of all sizes - media queries!</p><p>A media query is the code you add to your website's stylesheet to help align the design with the size of the screen the visitor is using.</p><p>For example:</p><!--more--><p>This is my About page on a 1220px wide desktop:</p><p><img class="aligncenter size-medium wp-image-6239" src="http://tiffdotcom.com/wp-content/uploads/2014/12/TDCdesktop1220-300x147.png" alt="TDCdesktop1220" height="147" width="300"></p><p>This is my About page when I re-size my browser window to about 515px wide:</p><p><img class="aligncenter size-medium wp-image-6240" src="http://tiffdotcom.com/wp-content/uploads/2014/12/TDC-about-515-223x300.png" alt="TDC-about-515" height="300" width="223"></p><p>See what happened? My website responded to the size of the screen so that I, as a visitor, could still read everything without having to zoom in. This, my friends, is what keeps people on your website when they're not viewing on a desktop.</p><p><strong>Hot tip:</strong> within the next two years, mobile browsing will likely surpass desktop browsing. So here's the best way to go about making sure your site is lookin' good.</p><p><strong>Don't design with specific phone sizes in mind.</strong> Media queries will often be written based on the size of an iPhone, an Android, a tablet, etc. We know those screen sizes, so if we cater specifically to them, we know it'll look great. But hold up. Say two years ago I set up media queries that looked great on the iPhone 5 portrait and landscape mode. But now the iPhone 6 and 6+ are out, and they're different sizes, so does that mean a whole new media query? There's no way to know how devices will change over time.</p><p><strong>Start with your browser at it's widest width, then slowly decrease the width until it looks like crap, and then write a media query for that size window. </strong>For example, at around the 1140px mark, my menu overlaps into two lines, and cuts off my page title. So, let's fix it! <em></em></p><p>What it looks like when I re-size my browser to 1140px:</p><p><img class="aligncenter wp-image-6245" src="http://tiffdotcom.com/wp-content/uploads/2014/12/1140-bad-1024x625.png" alt="1140-bad" height="296" width="485"></p><p>See how the upper menu drops into a second line, and covers up the "About" page title? No bueno. Let's get to cracking. First, I check out Inspect Element to see what's going on with my code. My header is comprised of two pieces - the title area, which is where my logo is in the left, and the header-widget-area, which is where my social media icons and menu are. Here's what I see:</p><p>The title area is 360px wide.</p><p><img class="aligncenter size-full wp-image-6246" src="http://tiffdotcom.com/wp-content/uploads/2014/12/titlearea1140.png" alt="titlearea1140" height="82" width="326"></p><p>The widget area changes depending on the size of the screen. It's 560px when the screen is 1140px or less (blue arrow), and 740px when the screen is larger than 1140px (red arrow).</p><p><img class="aligncenter size-full wp-image-6247" src="http://tiffdotcom.com/wp-content/uploads/2014/12/widget1140-arrows.png" alt="widget1140-arrows" height="217" width="328"></p><p>The 560px widget area is what's causing the menu to display on a second line - that's not enough space for the menu to display on one line.</p><p><strong>Which brings me to an important point: when possible, code using percentages, not pixels.</strong> If I know about how much space I want the menu to take up, I can give it a percentage number, rather than a pixel size, and it makes the whole thing much more fluid and responsive. So, looking at my header, I can say I want my title area to take up 25%, and my widget area to take up 75%. Here's what that looks like in the stylesheet:</p><p><img class="aligncenter size-full wp-image-6248" src="http://tiffdotcom.com/wp-content/uploads/2014/12/header-fixed.png" alt="header-fixed" height="129" width="500"></p><p>I sometimes will comment out the original code when entering in new code, just in case anything goes wrong. That way I still have the original stuff in there to revert back to easily. But, everything worked, and now my site looks like this at 1140px:</p><p><img class="aligncenter wp-image-6249" src="http://tiffdotcom.com/wp-content/uploads/2014/12/1140px-fixed-1024x625.png" alt="1140px-fixed" height="296" width="485"></p><p>WINNING! </p> </div><!--container--> </section> </article> </div><!-- page-->