Build Your Own Business Website header image

Thesis 2.1 for Web Design Professionals – Part 8 – Change the Responsive Header Behavior for Tablet Devices

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.

The next thing I’d like to do is to change up our 2 Column Responsive Header a little bit. I would rather have the tagline up here and a menu up here in these larger views.

Change Media Queries

So rather than the setting that here in our custom css, rather than using W total here, we’re going to use the… let’s see. Let’s just copy this and do this with the max width 450 pixels which is his smallest media query.

So in this case,we’re not going to have the float none. And the max width for the content should be 33%. So width is 33% and then width here is 66% and we’re definitely going to get rid of the float none and clear both. Actually, we may want to make sure that this floats to the right so let’s do that instead. Float right, we’ll save that before we refresh our view.

Review Changes

And actually, that looks fine in this view. But it shouldn’t be doing that in the other view so let’s go back and take a look at our css for a second. Let’s go look at that and max width 450. Okay you know what, the problem was the semi-colon that I put in the media query. That was my problem. It made that thing fail.

So now in the smaller devices, we have that original behavior and in the larger devices, we have these stacking. I think we also need to bring our tagline down in size so I think we’ll take that down to 18 pixels and see what happens.

Make Tagline Font Size Different in the Media Queries

So we’ll come over and let’s take our site tagline here. Font size, call it 18 px and let’s see what happens. Okay, that seems to work pretty fine. And the menu just works just fine and all the rest of that kind of lines up. Let’s take it up a little bit from 18 to 22. Yeah,I guess I liked that in the larger versions like this.

And we could take it down in the smaller versions, right? We could take it down into 15 pixels. Well, this is just 480. So I suppose we could just add one more media query to adjust it one more time and that is use this one here. We’ll just bring that font size down in this condition.

Remove Sidebar Border

So we’ve got our min width, max width. We’re just going to do the third one in here and take our site tagline down to 18 pixels. Okay so it works fine there. It looks better there, looks good there.

I think what we’ve got though is we’ve still got a sidebar border going on here. So let’s just go ahead and get rid of that sidebar border and we’ll do it in the large version. Let’s just make sure we understand what’s happening first. It is using column sidebar so what we’re going to do is to call it columns sidebar border none. We’ll just do that here. Save our custom css, refresh it one more time. There we go, it got rid of the border. That’s exactly what we were looking for.

Next up what we’re going to do is customize the menu so that we have a cool looking menu here but one that it doesn’t interfere with the responsiveness.

0 Comments… add one
0 comments… add one

Leave a Comment