• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Mobile first responsive – how to adapt

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Mobile first responsive – how to adapt

This topic is: not resolved

Tagged: genesis 2.0, mobile first, SASS

  • This topic has 2 replies, 2 voices, and was last updated 9 years, 9 months ago by schmidtb.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • July 1, 2013 at 9:39 am #48683
    schmidtb
    Member

    Hi There,

    I'm building a custom theme and plan for my CSS to be based on "mobile first" responsive design principles.

    What is the underlying methodology being used by the Genesis 2.0 responsive CSS?

    Any comments on adapting the Genesis 2.0 style.css to this methodology would be very helpful.

    I'm using a SASS based environment, so any additional comments in that regard would also be appreciated.

    Thanks
    Bradley

    July 2, 2013 at 7:43 am #48815
    David Chu
    Participant

    Hi,
    That very much depends. Any adaptations I would make would be no different from when not going "mobile first". I would just be starting from the bottom of the CSS, essentially, and moving upward, instead of starting at the full width media queries.

    You may want to set different breakpoints, and of course you'd want to style HTML elements that you're adding that aren't in the CSS. But that's just normal responsive coding, and isn't "mobile first" per se.

    I don't use SASS, so there may be special considerations for that. Maybe someone else will chime in who uses it. I could be wrong, but I think you'll have better results speaking with SASS hackers about that issue.

    Good luck, Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    July 2, 2013 at 9:07 am #48822
    schmidtb
    Member

    Hi David,

    Thanks for the comments.

    I've been doing exactly as you mentioned, basing the CSS on the Genesis style.css.

    Was just wondering why the team have not gone the mobile first route considering the efficiency for mobile.

    Thanks

    Bradley

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble