Media Queries Intro

My mind gets blown away regularly while I am studying code. Diving into media queries was no exception.

I began this journey by making a simple user card on CodePen. For this exercise I had to read up on CSS box shadows and found this article by Chris Coyier (surprise, surprise) to be very helpful. Here is a little peek at the magic that happened: Screen Shot 2014-01-01 at 9.31.13 AMI created the card with a mobile first approach, with the intention of addressing the full screen appearance later with media queries in CSS. Fun. Now getting back to media queries. I totally understand why this is just a crucial and amazing ability with the use of tablets, smartphones, etc., but I felt overwhelmed before I even began learning about it. I mean, surely this must be a difficult undertaking and occupy several chapters of any CSS book? My aging brain physically hurt at the thought. However, just a few paragraphs into this article I realized I was wrong and could relax a bit. This little miracle is achieved with just a few lines of code in your stylesheet.

It can all be achieved by adding a block of CSS code in the same stylesheet. Here is a useful article displaying media query dimensions for standard devices via CSS Tricks.

An excerpt from HTMLGOODIES on mobile use that I found to be a helpful visual aid:Screen Shot 2014-01-01 at 10.18.12 AM

Here is the CSS code and altered card once applying media queries for desktops:Screen Shot 2014-01-01 at 10.54.17 AMScreen Shot 2014-01-01 at 10.54.24 AMYou can test it out simply by dragging your browser window in and out. Again, here is the full example.

For further investigating, Treehouse also offers a media queries section for those signed up with them. And of course Chris Coyier masters the subject as well.

Happy media queries-ing!