Now let’s take a look at our Thesis 2.1 site in the responsinator because the last thing we’re going to do here is make changes, like the style we added to the Thesis Classic Responsive menu, work properly in a responsive context. When I refresh the responsinator, you’re going to see it doesn’t actually work.
Changes Needed for Menu, Background Colors and Images
In the first place, for the menu you can’t see any border and I want the border to have that dark border. In the second place, this wants to change its width and in the third place, you can see what’s happening here? That background image that we’re using for our sidebar is actually filling the whole background space and some of these smaller views and then is kind of doing half and half? So we need to remove that background image in that case from the mobile device view and we’re going to do that using Media Queries.
Customize Styles for Mobile Devices Using Media Queries
I have a whole tutorial on Media Queries in Lesson 3, Create the Responsive CSS, of How to Create a Custom Responsive Skin for Thesis 2. So if you don’t know what a Media Query is, you’re going to want to go and watch that before you attempt this.
4 Sample Media Queries
However, I’ve given you 4 sample Media Queries in the code snippets cheat sheet to use in order to make adjustments.
This first one is the one that we’re going to use which is one that essentially says “Do this code in any device except for the smaller mobile devices”, in other words, “Show this only to the desktop view”, that’s what this Media Query does.
The second Media Query is “Show it only in larger mobile views”. Third, this is the same Media Query Thesis 2.1 uses. These next 3 are Thesis Classic Responsive Media Queries that I’ve pulled out for your use but this is the opposite one and it’s the one that says, “Show it only in the desktop view”, because what we’re going to do is make some changes.
Changing the Media Query
I always put Media Queries at the end. A Media Query has an opening and closing curly bracket that wraps the rules. Each rule has its own opening and closing bracket as well but inside this Media Query, we are going to say that we want the border color to go back to that main border color.
Only Show Background Image in Desktop View
Also we need to get rid of this background image in that case. So we’re going to come back up here and take this rule, this one here, we’re going to take this rule out and put it inside that Media Query so that the background image will only happen in desktop views.
It’s good practice to indent so I’m going to select that and click tab to indent it all in. So now what this Media Query says “In a desktop view, give columns this background image”. We’re going to save the Custom CSS. That’s actually going to solve our biggest problem because now we’re back to our nice white color and we don’t have that blue background.
I’m leaving this blue bottom background because it looks pretty cool in these other devices. You can tell that there’s something else going on and then you get to the wider phone and the whole thing shows up which I think it looks pretty neat.
Add Borders Back In
The other thing we want to do is get borders back in here. So in this case, the way to do that is to come back over to our .menu .menu a border-color and cut that out and put that in here as well. We’ll just tab that over so it’s indented properly so we’ve got our opening and closing bracket for the Media Query and then this rule has an opening and closing bracket.
Now what’s going to happen is on a desktop view the border’s going to be this color and then all the rest of the views, it’s going to be regular color. So we save that, come back over here to the responsinator and refresh it. If you click the menu, now you see those borders show up but if you come over to Barking Chihuahua in the main view, none of that has changed, right? It looks exactly the way it did before we added the Media Query but now with the Media Query, it changes up so it looks right in that media.
Set the Maximum Width to Fit the Mobile Browser Window
There’s one last thing I want to do and that is to set a maximum width of this thing to 100% of its container because at this point right here, it’s set to be 300 pixels wide. However, we don’t have 300 pixels room for it so I want to make its maximum width 100% of the space available to it rather than a fixed width of 300 pixels.
So I’m going to do that by coming over here to our Custom CSS. Then I have to select the element that is controlling its width and that is this div id=”adf-form that’s what’s controlling its width, this div id=”af-form-194.
I’m just going to copy that and then go write my rule which is # that and then max-width:100%. So it’s either going to be 300 pixels wide or 100% wide whichever is less, max-width of 100%. Save that and refresh it. It didn’t change anything here but if we come over to this and refresh, now it fits properly inside the mobile browser window.
So you can see why I’m saying that in order to modify the Thesis Skin Editor with Classic Responsive and have your work stay responsive, you do need to learn a little bit about responsive design.