When I started designing this site I knew I wanted responsive web design and that I was going to use media queries to get the results I was looking for. I had never used media queries before this site, so I was excited at learning something new and also nervous that I’d screw something up.
Everything I had read on the subject indicated that it would be easy. They said “Oh its one of the easiest tools to use in CSS”. Don’t believe everything you read! Yes, once I got it to work it was easy but, there are things one must consider when using them, which of course I did not know until I dove in head first.
I am using a child theme (designed by me), based on WordPress’ new 2012 theme. I used the 2012 theme because they had designed that theme with mobile in mind and they had already started the media queries. But the problem was, they used media queries that made things true to more than one screen size and they only did 3 sizes.
Let me explain a bit. Take a look at the rules below.
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px)
/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px)
These rules are true for both desktops I use.
Are both computer at least 600px wide? yes.
Are both computers at least 960px wide? yes.
See this had me really screwing up my media queries. Which left me so frustrated. In the end, I choose a different approach that worked for me. This may not be how others would do it, but for my first time using media queries, this was how it worked for me and help me keep my sanity.
/* Minimum width of 320 pixels and max width 599. */
@media screen and (min-width: 320px) and (max-width: 599px)
/* Minimum width of 600 pixels max 959. */
@media screen and (min-width: 601px) and (max-width: 959px)
Notice how one ends and the next begins, I also set a minimum and a maximum width. These tricks help me understand and work with media queries better. Each designer I am sure has their own way of getting things done their way. Sometimes we have to use or do things that just work best for us.