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 3 – Part 6 – Tablet Portrait Responsive CSS Rules

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We’ve got the tablet landscape version done for the moment and now, what we’re going to do is the tablet portrait for our Thesis 3 responsive skin. We’ll come back over here to our snippets.css file and we’ll start creating here.

Now, remember that in our tablet portrait version, we want somewhat different behavior. In tablet portrait, we want the columns to go down to 100% wide. Essentially what we want to do is undo this here and reconfigure it and we’re going to do that by essentially, copying this and pasting those in there.

Clearing Floats to Make Width 100%

The first thing we want to do is make sure that our width goes to 100% and we want our margin-right to go down to 0. We also need to do something else because the way Thesis 2 creates this columns, we need to clear both.

We don’t have to do this, this is not something that’s absolutely inherent in all column situations, this is something that’s very specific to the way Thesis writes CSS right now so we need to just clear the floats in this case when we go to the width of 100%.

In this case, we want to say float:none, we want our widths to be 100% and we want our margin-left to be 0 and again, we want to clear both. Now, the other thing we could do here is repeat this in its reverse direction but what we’re going to do instead is come up here and copy the appropriate version here.

So columns_312 needs a similar kind of thing here and since it was a margin-right version, we’re just going to copy columns_312 .third here and it’s a right-margin version so we’re going to put it up with this then this was the margin-left version and do that.

Now, we have two rules that apply to all 4 of our column configurations and essentially what we’re doing is, we’re widening them out to 100% and we are clearing the float. If we come up here and copy that and come back over to our site, we’ll be able to see that in action here. So there’s our next media query and we’re consolidating all of those things into 100% wide.

Making the Columns Stack

You know what, this was a mistake I’m sorry. Let’s just erase all that conversation. This actually is what we want to do in the next version down. What we want to do in the 800 pixel wide condition is to continue to do exactly this except in the header. In the header, what we want is the columns to stack. Otherwise in the content, we want this behavior to continue and I completely messed that up because that’s not what we want to do here.

Let’s just come back over to here to our snippets file and let’s take these snippets and put them down in our 500 pixel wide because that’s where everything goes to 100%. What happens here is, at 800 pixels wide, we want to take our header and stack it and we want to take our footer stuff and stack it and that’s entirely a different set of code. In fact, let’s come over and take a look at our situation here, when we are down to our 800 pixels wide, we want this to stack and what we have to do is take these columns and make these columns 100% wide in that case.

The other thing we have to do is take these columns and make them 50% wide so that they stack then make these columns 100% wide. So that’s what we’re going to be doing here in this. We’ll be taking our columns_312 separately for the moment, paste them except that we’re going to say header area, remembering here that we are in our header area. We’re going to say our header area column third is going to go 100% wide and our column area two_thirds is going to go 100% wide.

Now, instead of this, it’s going to be #header _area .two_thirds and in this case, we’re going to say width is 100%, we’re going to say float:none and it’s going to have a margin-left of 0. Then #header_area .third is going to have a width of 100%, it’s going to have a float of none and it’s going to have a margin-right of 0. We’re going to make this thing behave differently and the other thing we’re going to do is say text-align:center here so that will center our logo and that kind of stuff.

Menu Settings

We have to do something special for our menu although, we may as well say, text-align:center anyway with this. It’s not going to actually work on the menu at the moment but we’re not going to worry about that because we’re really going to be changing the menu with CSS and java script when we go to make that responsive.

Review the Stacking Changes

What’s going to happen now is, everything is going to behave the same in the 800 pixel wide as it does in the 1024 pixel wide except the header. If we refresh that and scale this back in here, now you can see when you hit 800 pixels this stacks and it get centered and all we have to do now is adjust our footer so that’s next.

Footer Column Stacking

What’s going to happen here is, quarter is going to be width:50%, min-width and I think in this case, once we get down to this, we’re going to take our min-width down to 300 pixels. Let’s see, we’ve got 8 pixels on either side so that is 16 so really, 300 pixels. As soon as we get to 800 pixels, that’s going to make those two pieces come together and split into 2-stacking widget areas. Then that’ll happen until the widget area is 300 pixels wide and they will all stack.

In fact, for half what we’re going to do is really, it’s just this. For half, we’ll have width of 100%, float it none and we don’t care about those other things because we aren’t doing anything funky anyway. Now we have #header_area .two_thirds, #header_area .third, .half and .quarter which are going to behave differently at our 800 to 500 pixels stuff. Let’s just copy this, come over and paste it into our system, save CSS, refresh.

The Canvass Doesn’t Show Responsive Behavior

You may be wondering why I’m not using the canvass for this? The canvass doesn’t have responsive behavior so you can’t test the responsiveness in the canvass, however, this works fine. Now, I’ve gotten to the place where it’s 800 pixels wide, is it 800 pixels wide yet? Okay, that still didn’t change. Maybe I just need to refresh it. Footer Bottom, half, I see, I have to be more specific. I have to say, columns_2 .half in order for that to work and columns_4.

This automatic Thesis thing is more specific than .half and .quarter so I have to make this more specific than .half and .quarter. That’s columns_2 and I don’t think I actually need that but then, we need .columns_4. That was the immediate child, that’s what that greater than sign represented, the immediate child.

Thesis uses that, we don’t need it in this case so let’s try that again and hit the desired result, columns_4 .quarter, save, refresh and now we should see the behavior we want. See now, it pops out to 50% and stays that way until it can’t stay at least 300 pixels wide then it stacks so now we have the behavior that we wanted for that.

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