In this session we troubleshoot padding and margin issues in Thesis 2. We look for the cause of the issue and get rid of the bottom margin for a specific widget area and the search form gets wrapped in a paragraph tag.
Member: So we created another area, we call it the White Bar Area at the very top as you can see.
Member: And we have padding there that I cannot find out where it’s coming from.
Rick: Your padding there…
Member: Right below the…
Rick: Okay well, that padding appears to be part of the header area…
Member: Yes, and I…
Rick: Okay, something is failing or there’s nothing in the header, one of the two. We’re still doing this as a background image.
Member: I’m trying to get her to change that and just make it a strip
Rick: You know, it’ll never be responsive as a background image, right?
Member: That’s what I told her. I said she needs to give me the logo that I can put on the lefthand column and then give me a sliver that I can put in there and repeat.
Rick: Right, that’s absolutely right and I think that that’s probably where this comes from in one way or another. It’s in the page wrapper somehow.
Member: It is
Rick: Well, you’ve got a height specified
Member: Did that take it away?
Rick: Well, how big is the image? Image is 180 and that’s actually, it looks like it’s part of the image, that white space is the top part of the image.
Member: She said it wasn’t. I thought I looked at that and I didn’t…
Rick: No, it isn’t.
Member: No, I didn’t see any white above there. But you know what, maybe we shouldn’t even bother fooling with this until I get the right images from her that I need and see if that solves that problem.
Member: I was trying to do that today, I’m not sure what happened.
Rick: You know, I think this probably comes from that style where it says it’s 179. If you made it 159, what happens, height 149. Isn’t that odd? No, it’s obviously not just that.
Member: Now, is there anything in that white bar area that could be causing it? Well, now there is, it’s not highlighting that at all, I mean that was a total addition.
Rick: Well, it doesn’t appear, let’s just look a little further just to see if maybe there is something inside of this that has, there it is. It’s actually being caused by this search widget, margin bottom 24 pixels, well I didn’t get very far though did it? Quarter, padding, that’s fine. Okay, the problem here is in this widget.p, what happens is that the p tag has a bottom margin and what you have to do although, okay, bottom margin right here .widget p. What you have to do is get rid of that bottom margin for this widget area so under your white bar area div id=”white_bar_area” .widget p, just say margin-bottom:0 and it’ll go away.
Member: Okay, that was .widget .p?
Rick: It’s “white_bar_area” and then space and then .widget and then space and then p.
Member: Okay, “White_bar_area” .widget p margin-bottom:0 okay.
Rick: That’s it.
Member: Alright so that would… problem, whatever, existed regardless of how we did that, okay.
Rick: Yes, it’s because it’s a widget and for whatever reason, the search form gets wrapped in a paragraph tag.
Rick: That’s why.
Member: Okay, very good. Thank you.