Build Your Own Business Website header image

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.

Lesson 6 – Part 7 – Make it Responsive

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now, the last thing we’re going to do here before we quit is to make these widget areas responsive and it’s going to be pretty easy. You can see that it already does respond and that each one of these floats left but it doesn’t respond quite the way I want it to so that’s what we’re going to do next.

Reduce the Size of the Container

If we come back over to our style.css and look at our max-width:1024px setting. For our max-width:1024px, what we’re going to do is essentially reduce the size of the overall container, get rid of the margins around it and we’re centering it. Margin top and bottom is 0 and the auto means that the whole thing gets centered in the space. That’s what happens at 1024px.

Below 800, what we do is we reduce the width of that main container and make sure that our margin is 0 top and bottom and that it’s set to auto. What happens is our rightmost widget is going to drop down below and we want to make sure that the rightmost widget has a top margin of 20, it has a left and right side margin of auto because we want it to center in the space that’s available to it and it has a bottom margin of 0.

Setup Maximum Width and Margins

We’ve essentially changed our maximum width and we’ve changed up our margins on this. Finally, in the smallest view of this, what we’re going to do is make the maximum width of the wrapper the same fixed width of the widget. Remember those widgets were all set at 300 pixels and we haven’t changed that. We’ve set the margins top and bottom to 0 but we’ve set the left and right margins to auto so now that 300 pixels is centered in the width of the device.

We have set our home_widget_column so that they have a top margin of 20 pixels but no left, right or bottom margins. That gives us a nice even spacing between them, top to bottom but removes all the weirdness left to right. We’ll go ahead and save that, upload it, refresh the CSS file and refresh the view. Now what happens, we get down to the 1024 and you can see it steps back in a bit and then as it gets below that and gets down to our 800.

These two things center in their space, this one stacks down below and as it gets too small, again these things now are centered and they don’t get any smaller. Now they just get centered and they stack, that’s the behavior that we’re looking for.

Make the Menu Responsive

There’s one other thing I want to do and that is make our menu responsive because right now, it isn’t. It stacks up to the left, it doesn’t jump into the center and that’s really what I want it to do. We really only have to make this menu change in one place and that is at the max-width:800px.

If we go to our max-width:800px, we’ve got our header, we come in here to menu, header-right .menu, float:none, text-align:center; so right now, we had a float from menu, we’re getting rid of that float so it’s no longer going to go to the left. We are aligning the text to center which means that everything now gets centered in this space.

For li items, they also used to float to the left so now we’re going to float to none but we’re going to make them display as inline blocks. What that essentially means is that each li item is going to either stack side by side however, many of them that can fit in that space are going to be centered in that space then it drops down below and starts centering more of them so on and so forth.

That’s what makes these center, is really just to use two bits of code and it works no matter what the size of the screen is. We’ll upload that, refresh the CSS file, come back over here and now, it centers. You can see they stack and center as I go down in size.

First off,  I’m just getting rid of that background image, hit save, refresh this again and now, we’re going to have the old background image pop up in there and we have the same dropping down nicely like we want it too. Obviously, I have to fix the color here because the color got messed up but we’ll work on that next week.

Responsive Site Progress Report

In any case, what we have now is a site that responds the way we want it to respond and a front page that is distinctively different than the main pages. Next week what we’re going to do is style the posts page because the posts page also has a bunch of different styles that we’re going to change.

Save $200 on Membership Now!

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

Leave a Comment