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: I 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:
Here is the CSS code and altered card once applying media queries for desktops:You 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!