Build Your Own Business Website header image

How to Adjust Spacing Between the Excerpt and the Read More Button in Thesis 2.1

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.

In this session we demonstrate how to adjust spacing between the Excerpt and the Read More button in Thesis 2.1 using custom CSS and show three places to remove the margin.

Video Transcript

Member: I can’t see at all any under CSS or anywhere how to manipulate that space. It’s in the bottom of the Excerpt and there’s a Read More and then again, it’s space between there and the next headline.

Rick: Okay, so

Member: And what you got up on your screen is a little, there’s a record difference to…yes, so that’s better than the one I got on my screen actually, it’s closer so you got it exactly right if you keep looking at it, and how do I reduce that space there?

Rick: Let’s see. I think it is going to require a little bit of custom code on your part but perhaps not much..

Member: CSS or PHP?

Rick: What’s that? CSS.

Member: Oh yeah, thank you. That’s no big deal. But you know… It’s just by it but I just couldn’t see where that space is controlled.

Rick: Okay. So yours looks something like this at the moment?

Member: Uhuh.

Rick: And this spacing is controlled by… okay well, in the first place there is a top margin for the .post_box .post_footer

Member: Okay.

Rick: So .post_box .post_footer and you can just say margin-top:0 for that and then now you may not want to do any more than that but the other thing you could do well, since you’re talking about a much smaller excerpt, right?

Member: Exactly. Probably, we don’t know with image but I may play around with it but yes…

Rick: The other thing would be to let’s see… Now that’s got no margin and that’s got no margin so why aren’t they write up? Oh, because the image also has a bottom margin.

Member: Uhuh.

Rick: Okay, so you’ve got 3 places to remove margin. So I would do this as .home_archive .post_box and then .align-left and then say margin-bottom:27 pixels. Actually, let’s just drag out the code editor here. Okay, so looking at home _archive .post_box .align-left{margin-bottom:0px;} so that’s one thing. Is it .home_archive .post_box together let me just make sure, post_box home_archive yes it is, pardon me my mistake. So that’s .home_archive .post_box .align-left that would be margin-bottom for that and this is .post_box p so we do the same thing with this.

Actually, I may as well simplify it .home_archive .post_box p{margin-bottom:0px;} and then you have finally, the .home_archive .post_box .post_footer{ margin-top:0;) and then you can just adjust these to your heart’s content, right?

Member: Thanks for that.

Rick: I’m going to put this in the chat window for you. Do you think that answers your question?

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