Build Your Own Business Website header image

How to Customize the Post Box in Thesis 2.1 – Part 8 – Adjust for 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.

The styling for this Post Box in Thesis 2 looks pretty good now. So, the next thing we want to do is check it in the responsinator and then fine tune it. It looks like that’s definitely problematic, that one is problematic. So we want to set a min width. At what point did it start to be a problem? And how big is the Nexus? It’s fine, okay.

Clearing Floats

We need to employ the after, .home_archive.post_box .post_footer:after pseudo class and then get the $z_clearfix rule. I think that will clear the floats properly. After is a pseudo element and this is a method of clearing floats. There we go, that does work so now it’s sitting here like that and like that yeah. Okay, perfect.

Table Portrait Customization

So the first level that we may need to address is the tablet portrait because there’s so much stuff in tablet portrait. It’s fine in tablet landscape but in tablet portrait what would be best is if comments was up here and all this was down below. So let’s refresh this here and look at the style editor and let’s go down to my media queries.

Tablet landscape is fine. For Tablet portrait what we want to have happen is for this to float right. Let’s look at our Skin Editor here. We’ve got Number of Comments which is okay in that case. I guess this scheme is not going to put the comments on a top line.

There’s nothing I can do about getting the comments on the top line this way. But what I can do is make comments float left right, float:left; I can do that and I can reduce the width of these things especially Google.

Set Max Width

I could say max-width:75px so that those slide up like that. So I set a maximum width in the tablet for actually, I think Twitter would be a good one to set a maximum width for too. Yeah, let’s do that.

So what we’ll do here then is in custom CSS copy that and come over to our skin design and then over to our media queries, tablet portrait and we’ll say .agility .post.footer and what we’re going to say is max-width:80px for all three them. So all three be the same width in this case, let’s see if that works. Yeah, that did work okay.

Isn’t that interesting? However, there’s nothing you can do about it if the category has a long name because that’s the one thing that’s going to happen here and that’s one thing we haven’t noticed yet because we don’t have any real long category names but as soon as you have a long category name that’s going to shove this stuff down. I don’t see that there’s anything you can do about that either but that’s going on here, long category name forces one of those things down.

The other thing we want to do is just move this “num_comments_link”, make it float left. So back to our media query, .agility .num_comments_link and then we’ll say float:left. Then we have a couple of other things we have to address on our smaller devices. Okay, that didn’t float left. I must have hit reload too soon.

No, okay so obviously I didn’t save this. What did I do? There it is .agility .num_comments_link, oh, Smartphone I put it in the wrong one, sorry folks. There we go, now it’s on the right spot.

No, it’s not behaving correctly here. Let’s just double check our CSS file.So I got that .facebook, max-width, .agility .num_comments_link float:left, it’s in there. Oh, I bet it’s not specific enough, I bet it’s .home_archive.post_box .post_footer .num_comments_link that’s a problem, it’s being overwritten by a more specific rule.

Set Minimum Width

So tablet devices okay, .home_archive.post_box okay. I was looking for the hard answer to the question when the easy answer to the question was just sitting there. Perfect. So then I think the only other thing that’s really wrong with this is that we want to specify a minimum width for the headline and we want to get rid of the margin:left.

Oh, that’s all we really have to do is get rid of the left margin and we’re going to do that in all cases where they’re not sitting side by side so that is both versions of the smartphone, right? No, maybe it isn’t, where is the iPhone4, iPhone5 landscape those are sitting side by side. Yep. So the only one we need to do that for is the smart phone portrait, .home_archive.post_box.headline_area margin-left:0. Say okay, save it and refresh it. Perfect.

0 Comments… add one
0 comments… add one

Leave a Comment