Build Your Own Business Website header image

Make Your Styles Responsive in the Thesis Classic Skin

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.

Now this shows you something interesting. I think I’d rather show it to you in the responsinator. Let’s go back to the Home page and then over to responsinator. Add the url. Let’s go to an incognito window so we don’t get the admin bar and the like.

That’s what the site looks like now. You’ve got this dark blue color in the main content area where you don’t want it and this has the padding where we don’t want it. This also has padding where we don’t want it. We probably want to change the styling on the forms a bit. The sidebar color isn’t the way we want it.

Now is when we have to make some tweaks to the responsiveness on the site. The first thing we are going to do is come over to the Skin Editor and look at the media queries that the site is already using.

If we come to the CSS and scroll down here towards the bottom, here’s his first media query. It’s media all and max width with a w total. And then he’s got a bunch of rules. And then he’s got a media all and max width 450. I like to add one more to that media query.

If you look at what I have here there are three media queries. There are actually four but the fourth is a more advanced concept that we aren’t covering today. I’m going to copy the bottom three media queries and come back over to the Custom CSS and paste those.

You can see why I said you have be interested in getting your hands dirty in order to take full advantage of this stuff as a DIYer.

I’m going to get this set of comments and down here we’re going to call this media queries. This is for larger mobile views. When the max width is the total width which is the sum of both columns.

This is the larger mobile view here. This is the tablet mobile view and this is the smart phone mobile view. Those are your three media queries that are common in DIY Themes CSS.

He’s taking it down to a single column even in the ipad landscape. We definitely want to make this stuff sit properly and we want to get rid of that green background altogether.

For the large media query the main thing we want to do is get rid of this green and then make this work properly. Make this clear both and display inline block. Actually I don’t want it to be display block. Inline block is not giving me what I want so that’s not the fix. The fix is this input and there we will say clear tab right and that probably needs to be display inline too.

We are going to have to make the names display block float left. So Thesis email form label and input we are going to make display block. Thesis email form label, Thesis email form input display colon block. Type equals text. That should give us something to work with.

At this point it’s a bit of trial and error. This form has changed since I taught this class last and this didn’t used to be an issue.

Let’s flush the cache and take a look. There must be an error. Ah, there’s a syntax error here. We’ll clean that up and now it works. We could leave it like this or we could do email form text align center. I could make these a specific width saying input type text equals 300 and that would work well. I could probably do that with the whole thing. Width colon 300px, semicolon.

Let’s go back and do width 300px and then margin zero auto. So it all sits in there and we’ll call this max width 300px. So now you have a form that looks decent.

Let’s go back over to Custom CSS and paste in that code. We’ve got text align center, display block max width, margins are auto. So our form will now look right in mobile devices.

The other thing we want to do is get rid of this green. We have to do this with both of them. Copy that and come down into the same section. Say background image none. We’ll make this more efficient and get rid of the extra code.

Let’s reload the page. It looks good here. Let’s go back to the responsinator and make sure it looks good there. We still need to get rid of this padding but the email form works right now and everything else looks good.

Go back to Custom CSS and at the top here we did content widget padding. So come down here and not in the first media query because we want the padding to be there but we’re going to do it here. Content padding and we’ll type zero. I don’t think we’ll need this media query. We’ll probably end up deleting it. Let’s save the Custom CSS.

Go back to the site and flush the cache. Now the slider fills the space in each of these views.

You can see that for the DIYer to take full control of Thesis, especially if you are going to do stuff like this, you are going to want to learn a bit of CSS. The good news is that a lot of this stuff can be manipulated using the CSS that comes with the skin.

0 Comments… add one
0 comments… add one

Leave a Comment