Build Your Own Business Website header image

Understanding the Thesis Classic Responsive Media Queries

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

Let’s move on to looking at the Thesis Classic Responsive Media Queries in Thesis 2.3. We are going to take a crack at changing up the header and writing some new media queries rules.

3 Media Queries Included

That starts really in just Skin CSS. Classic Responsive has 3 different media queries. It has the non media query version which is the desktop version. So something that is automatically going to happen and it doesn’t change until the windows get smaller.

It has the media query where the device is as wide as the total width of the site or smaller. That’s the first one so you can see it has max width w total. This is the total width of the site. Total is the combination of sidebar and content column.

Then the next one is similar to that in that the max width is just the width of the content. So if a device is the width of the content, in our case 692 pixels, or smaller then that one kicks in.

The only one that is hard coded is the smart phone one which is max width of 450 pixels.

So those are the three media queries that come with Classic Responsive. Now the other skins are different but this is the way Classic Responsive works. And I’m going to suggest to you in a few minutes a fourth media query and that will be a media query where you have rules that only apply to the desktop version.

Right now we have a bunch of rules that apply to the desktop version and to everything else unless it is superseded by a media query for a smaller screen. By the time we are finished today we are going to add a media query that says “these rules will only be used in the desktop version”.

Desktop First CSS and Mobile First CSS

>>Chris: So a quick note. The way the media queries are structured for Classic Responsive. Scroll down just a bit so I can show this. The way it is setup is it says “add media all and max width wtotal”. Whenever you see max width and when the first media query that appears in the cascade of the CSS document there…wtotal is as wide as we are ever looking to constrain things.

When its max width and the largest width happens first you’ll know that you are looking at what’s called a desktop first CSS arrangement. Meaning that everything that appears before that is really intended to affect the desktop display of the site and then everything that appears after that is going to specifically address concerns found on smaller screens.

Benefits of Mobile First CSS

Since Classic Responsive was built I have changed the way that I personally would ever go about doing this stuff. I like a mobile first approach because it simplifies the way things…you don’t have to undo anything in the style sheet. You are usually only adding or if you do remove anything it’s very minimal.

With the approach found here in Classic Responsive you actually have to undo more stuff as you get down to the smaller styles and I don’t like to undo, I like to add. Kind of a semantic difference.

The mobile first approach tends to be slightly smaller in overall footprint so I prefer it on that basis. It’s a little easier to troubleshoot but it’s just something to note when you are looking at a style sheet like this what you are dealing with. Kind of gives you some direction on how to attack it.

>>Rick: And you get a little benefit when you do the mobile first out of Google Page Speed on the mobile version because it doesn’t require as much CSS to render the mobile device. It can start rendering the mobile device before it hits the media queries and so the above the fold stuff gets done a little sooner. So you get a little boost if you are using that concept.

I’m looking forward to designing a skin myself where I do that. I haven’t done that either.

>>Chris: I have to say it is so refreshing. Like I have been doing this long enough that I get fatigue over desktop CSS. You can do so much with the available width of a desktop website. You have to be such an expert at this stuff and have done it so much to really begin to see through the matrix and say hey, look at all this stuff I’m considering just because of this desktop layout.

It is so freeing and awesome and has given me renewed vigor to do CSS by taking that mobile first approach because you just cut through so much crap. And so much conceptual stuff that’s kind of like a pain in the butt to learn with CSS, you just cut through all the stuff right away and you get this very nice, very simplistic sort of approach. I think it’s probably the best way to learn CSS now as well.

>>Rick: I’ll have to keep that in mind.

>>Chris: Because you don’t worry so much about the box object model which people screw…it’s a lot of working with CSS to understand that but if you do the mobile first you don’t have to understand. It’s very intuitive.

Viewport of Devices and Screen Width

>>Rick: So, the one thing I wanted to say about this is that this is essentially your tablet landscape version of the CSS. The next one down is your tablet portrait version of the CSS all the way down through the big smartphone landscape views.

>>Chris: Quick note about that. He’s talking about the screen sizes kind of shrinking. The code that addresses those is actually not based on screen size it’s actually based on the natural breaks of the layout and whatever screen shows, whatever displays it’s kind of letting the chips fall where they may.

If the viewport of your device happens to be slightly wide enough to accommodate the desktop even if it’s an ipad, like one of those huge ipads, then it was going to display like the desktop. So it’s not really a decision made on a device basis. These are decisions made on the natural breaks of the layout that your working with.

>>Rick: And so if we had used smaller column widths you would have seen the full width of the design on a tablet. But because we used larger column widths, we see the smaller version of the design.

I guess that is dependent upon that w total. How big is it? It is bigger than a tablet then you’re going to see that version of the design.

>>Chris: And you were showing responsinator. That’s a great way to test what is this going to do on this device.

>>Rick: Yes, it’s the perfect starting place. It’ll get 99% of everything and then you just have to worry about the weird apple devices.

5 Comments… add one
5 comments… add one
  • olli k August 12, 2017, 9:12 am

    Hi Rick, it says “Video not found” when I click play (only this video)

    • Rick Anderson August 15, 2017, 4:33 pm

      Just try refreshing the page. The links to the video may have expired

  • Canonical August 22, 2017, 8:02 am

    I’m having the same issue and refreshing doesn’t seem to help.

  • Garrett Kniffen September 1, 2017, 5:59 pm

    Yup. Same problem here. I refreshed many times to no avail. (On a related note, I can never get these HTML5 videos to play on an iPad either. Anyone know why?)

Leave a Comment