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 4 – Part 7 – Smartphone Responsive CSS Rules

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

The last piece of the puzzle is when you get down to less than 500 pixels and it actually doesn’t require very much from us. It doesn’t require any changes to the standard Thesis setup. The width is still going to be 100%, we’re still not going to have any padding and the content’s still going to be 100%. There’s still not going to be any margin, the sidebar’s still going to be 100%, still going to float to the left and it’s going to have no margin.

These standard Thesis pieces don’t require any change. The only thing that’s going to require change is our custom HTML. At the moment, that’s primarily in the footer.

Change Custom HTML in the Footer

Actually, there will be something in the header too but right now, we’re just talking about the structural bit. We need to make changes to the footer left and footer right. They used to be 50% and then they were 100%. Now, what we’re going to say is that the footer left is a minimum of 249 pixels wide and footer right is a minimum of 249 pixels wide so let’s just refactor that.

The footer widget column, rather than being 50% which is what those footer widget columns were, are going to become 100%. The footer widget column is essentially going to fill up the entire footer right width. That’s really the only thing we have to do here in order to make the structural CSS work so we’ll just save that, upload it, add it to our layout.css file and refresh it.

Review the Changes

When we come all the way down here, all of of these things stack, 1, 2, 3, 4 stacked on top of itself then bottom left and right stack. That stacking works until you get to a certain point. At which point, we go back to side by side. That’s what happening and that’s what we’re really working on with this. The same thing is going on here.

There are a couple of things that are worth noting once we get to this point. One of them is, we don’t really need that great, big space up there at the top of this, once we start getting smaller.

In fact, we could probably get rid of that great, big space. We don’t have to do it here but we could get rid of it at this point. When it gets to its centered view like this, we really don’t need that much room up there and we definitely don’t need that much room when we’re down here in these narrow dimensions because that’s quite a bit of real estate.

Reducing Space Size

We want to write some code that reduces the size of that space and at the moment, what that looks like is header area .page padding top. What we’re going to do here is come up probably to this one and we’ll say #headerarea .page padding top:1em. We’ll have some padding up there, just not much.

Save, upload it, save it, refresh it. Doesn’t affect us here but it’s going to affect us there. I don’t think that worked. Inspect the element, header area page padding top 2.2em is still there. Header area .page padding top 1em. We’ll look at our layout.css. Come down here and look at header area .page. It is saying that it’s firing.

I guess we’ll add padding top 1em there as well so header area .page, that one’s working. Really, we’re just talking about header padding top 1 em. We can go ahead and refactor this. Save it, upload it, save it and refresh it.

We gain some height here because now our  header area only has a padding top of 1em and our header area .page has a padding top of 1 em so we gained space there. If it continues to come down in size, you can see that happens.

Reducing the Text Size

The other thing I want to do is reduce the size of this text when we get down to the small size so PID logo, the font size is 3.6 em and I want to take that down to 2.2 em. We’re looking at header logo, come down to here and we’re going to do header logo. I’m going to say font size: 2.2em. In the smallest screen, we don’t have the huge text here.

IUpload that, save it, refresh it and now when we get down here smaller, you can see that Thesis BlueMasters get to be smaller. Let’s just take a look at this now inside of the Responsinator so you can see, it’s actually working correctly.

These things all stack right here just like it’s supposed to and in the landscape version again, it works like it’s supposed to. We’re going to skip the crappy one, come down take a look at the tablet version of it. Tablet version centers.

If we come down and look at the bottom tablets, it’s got the 2 by 2 and these things stretch across the bottom. This looks very much like the standard layout like that. We now have sort of the bare bones. We have the structure that makes the rest of these responsive.

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