Build Your Own Business Website header image

How to Convert a Flash Site to WordPress & Thesis 2.1 – Part 14 – Use Media Queries to Improve the Responsiveness

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to - ,

Whoops, you've found some premium content!

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

To finish off this case study on How to Convert a Flash site to Thesis 2.1, we need to improve the responsiveness using media queries. We just changed the media queries to adjust for the logo in the header but we have some additional areas that need attention.

For example, this menu still needs a little bit of attention from me because that’s not what the menu is supposed to do in this view. You can see it keeps on working and then when we get down to our full width, the iPad that direction, and it doesn’t show up.

So we have this. Anytime the sidebar is down below then the logo shows up and otherwise, the logo doesn’t show up and so let’s fix this because that also needs a little bit of attention.

This is coming from that, if I get rid of that then that is coming from this and then I’m missing my top padding. So what I have to do then is come back over here to my Custom CSS. And I’ve got my media all min-width with 901 pixels.

Now I’ve got to come back and go to my max-width 900 pixels and I have to fix the menu and so that is is essentially undoing this stuff where top nav is going to be text-align:center. In fact, that’s it right there but instead of text-align:center, it’s going to be text-align:left. And instead of display:inline-block it’s going to be display:block.

I think that’s what it is and then we want a #menu-main-menu a and then we’ll say padding-top:10px; and padding-bottom. I don’t want to mess up the padding on the left and the right so this should fix the menu in that condition. Let’s see if it does. No. Okay, where is that coming from now, width:100%; okay maybe this should take actually.

It definitely took so let’s see because the only thing that can mess that up…oh I see, we said #top_nav .menu a, let’s change it to that #top_nav .menu a. Use the same selectors as we used before instead of messing that up. Okay,well I still have something to fix on that thing right there and I’m not sure what it is. Oh I see, it is display: none that’s what the deal is. So display:none, main-menu and I’m going to say .menu, display:none. In fact, I’m just going to be consistent with this and I’m going to say main-menu .menu.

Let’s just make sure that that’s working correctly here now. Yes it appears it still works correctly here and then what happens to it here? Okay, #menu-main-menu .menu, #menu-main-menu .menu, we’re just going to delete that one there and see if that solves it. Well, not yet it hasn’t. Oh, it’s because I misspelled “none”, that’ll do it to you, display:none.

You know, when things like that aren’t working I should look over it though, especially in the questions area where you guys post because you are routinely posting the solution to the problem. Here we go. Bingo, except that’s not opening it as it should.

Once you click on this, show menu should be display:block and so I think I’m going to have to just add one more to that to fix this. Centering menus is a pain obviously here. There might have been a better way to do this.

Well, I think the one other thing I should do is to be more consistent here, #top_nav and then do that so that’s display:none but then we’ll have our last one #top_nav .menu.show_menu display:block.

Essentially that allows us to imitate the style that Chris has written while centering the menu. Okay, that’s looking a little bit better, there we go finally heaven’s sakes. I think we’ve got that handled now.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one