Mobile First Theme for Genesis 2.0+

We’ve long been huge fans of the Genesis Framework – it integrates with tons of well-designed child themes, it offers lots of amazing functionality and plugins, and the StudioPress support team is consistently speedy and helpful. One thing we’ve always wanted, however, is a basic Genesis child theme that is “Mobile First.” So we decided to go ahead and make our own! We wanted to keep things as simple as possible, so we started with the Genesis 2.0 Sample Theme and went from there. Most of the work just involved rearranging CSS, however you may want to check out the full list of details below for more information.

Theme Details

  • Requires Genesis 2.0+.
  • All media queries have been switched from “max-width” to “min-width”.
  • Media queries have been rearranged to proceed from smallest to largest widths.
  • Only two changes were made to the original CSS  to preserve styling after rearranging the media queries:
    • Line 700: .sidebar .enews-widget was changed to .sidebar .widget.enews-widget
    • Line 1366-67: the margin-top selector was changed to margin
  • This theme’s functions.php is identical to that in the Genesis 2.0 Sample Theme, only difference being the child theme name, url, and version definitions. It adds theme support for:
    • HTML5
    • Responsive viewport meta tag
    • Custom background
    • 3-column footer widgets

Important Note

Being as this theme utilizes mobile first media queries, you’ll need to utilize a polyfill if you want the theme to appear correctly in Internet Explorer 8 and below. Here are a few options: