Blog: Tutorials, Tips & Tools

Quick web design tip. Mind your @media queries while coding WP child themes

New WordPress default theme, Twenty Eleven, is responsive. Which makes it really awesome:). Don’t forget about this while writing child themes.

Quick tips to save you some time and head scratching (“doh, why is it happening on mobile now?” kind):

  • Copy at least @media (max-width: 800px){} into child theme’s CSS file
  • As soon as you override any structural element’s width, don’t forget to go and unset those changes in the @media (max-width: 800px){}. At least. Do it right away. Otherwise, you’ll forget which container now floats left with width 50%, instead of being 90%, who got new paddings/margins, etc. So, it’s really a good practice to do it for desktop and for mobile at once.