How is mobile CSS different from desktop in Genesis?

[Doug]

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/

[Victor Font]

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?

[Doug]

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

[mrkoetje]

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?

[Victor Font]

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