• 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

How is mobile CSS different from desktop in Genesis?

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 › How is mobile CSS different from desktop in Genesis?

This topic is: not resolved

Tagged: Atmosphere, css, genesis, mobile, widgets

  • This topic has 4 replies, 3 voices, and was last updated 7 years, 7 months ago by Victor Font.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 15, 2017 at 9:48 am #207796
    Doug
    Participant

    I'm using the Atmosphere Pro theme, and have noticed that some of my past CSS changes to things like the front page section 1 text will produce changes on the desktop, but not the mobile version of the site.

    For example, one time I added a drop shadow to the main home page text on my front page section 1, and it didn't work on the mobile version of the site.

    I've searched the support database, but can't find any information on what the difference is, and how to make changes that cover both desktop and mobile versions.

    Any input on where to find more information on this would be appreciated.

    thanks
    doug

    http://dougschumacher.com/
    June 15, 2017 at 10:36 am #207800
    Victor Font
    Moderator

    This isn't a Genesis thing, it's a CSS thing. Mobile CSS is driven by media queries. You'll find the media queries at the bottom of style.css. Media queries control CSS at different screen dimensions. A mobile screen, being smaller than a desktop, requires different CSS to display content correctly.

    CSS executes in a hierarchical fashion. In other words, from the top down. If the theme is not following a mobile-first design, then the desktop CSS is executed first by the browser. The mobile queries override the desktop CSS as the screen gets smaller. Maybe this article will help: https://www.w3schools.com/css/css_rwd_mediaqueries.asp


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    June 16, 2017 at 10:07 am #207828
    Doug
    Participant

    Thanks, Victor. Very helpful response and article.

    The article speaks of the importance of designing for Mobile First, which I definitely would like to do, especially as this seems in line with Google's philosophy.

    I found the following on line 96 of my home page:


    @media
    screen and ( max-width: 782px ) {
    html { margin-top: 46px !important; }
    * html body { margin-top: 46px !important; }
    }

    My understanding from the article is that because the code refers to "max-width" and not "min-width", that my Atmosphere Pro theme is not a Mobile First theme.

    At this point, I'm wondering what my options are to have a Mobile First design. I'm guessing it's not an easy conversion for an existing Genesis child theme?

    If I want to fix just this one front page section (front-page-2), would that mean inserting a mobile version of the <div id="front-page-2" class="front-page-2"> code right after the current @media media query on line 96?

    thanks

    October 24, 2017 at 2:48 am #212869
    mrkoetje
    Member

    I restart this topic because I would like to see an answer on this one. I would also like a mobile first approach, but genesis themes are (all?) desktop first.
    Does anyone know if Studiopress will make (optional) CSS styles for their themes?

    October 24, 2017 at 3:27 am #212870
    Victor Font
    Moderator

    Some of the newer Genesis themes are designed as mobile first. Traditional programming has always been desktop first. Mobile first design is a relatively new paradigm, but old habits die hard. I'm not convinced of any advantages one way or the other.

    "Does anyone know if Studiopress will make (optional) CSS styles for their themes?"

    We're all community volunteers with no affiliation with Studio Press. We don't have insights into their plans.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 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

© 2025 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