Build Your Own Business Website header image

Troubleshooting and Solving Responsiveness Issues 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 troubleshoot and solve responsiveness issues in Thesis 2.1 for an image that has absolute height. We use custom CSS for the image container widget and remove the bottom margin to get rid of the height because it’s set automatically and is too tall for the space. We show how to specify a fixed height on a mobile device using the media query to override the code that gives it an absolute height.

Video Transcript

Rick: Okay so you’ve got some problems with the site?

Member: Yes. You have it there and I think it’s probably going back to what you helped someone else with there’s maybe the custom CSS and probably custom media queries.

Rick: OKay.

Member: Because it has to do when you go to the mobile site and kind of get messed up a little bit and because the large image across the top of her site and then I used the feature box for the signup. She uses MailChimp and so I had gotten some code from DIY Themes on how to you know, make the signup not a normal box that shows side by side.

Rick: Uhuh.

Member: You see how it just kind of gets all messed up when it’s on a smaller device.

Rick: Yeah. Now so part of the problem is that you’ve given this thing an absolute height, right?

Member: Right yes so it’ll look right you know, she didn’t want any space or anything so I gather some custom code in there for it to have an absolute height and also…

Rick: Is that really necessary?

Member: the feature box. Well, I think when I didn’t have that in there there was still some like a piece of blue underneath the picture.

Rick: I see it, a piece of white underneath the picture right now, yeah.

Member: Uhuh.

Rick: So what would be causing that piece of white? Okay, actually rather than giving it a specific height what I would do here is use a piece of custom CSS for your image container widget so I would do something like #image_container .widget and then {margin-bottom:0;}. Now what’s causing this is the bottom margin of this widget here and if you kill that bottom margin that space goes away and then the space will automatically resize in the responsinator to fit the image.

Member: Okay.

Rick: So that’s the first thing I would do there, I’m going to put that in the chat window for you.

Member: Okay.

Rick: And then for this, what is that? Okay, so you’ve got that there and then you’ve got this here and why isn’t that working? Look like it should work okay that worked. We are missing some float clearing it looks like. Why would we have a okay feature box area and we’ll probably get rid of the height again that’s the problem because the height is being set automatically and it’s too tall for that space so if you get rid of the height and then in your columns 312 check the box that says Remove Top and Bottom Padding so if we come back over to HTML for a second and look at the Columns like the Typical 2 Column Content, there’s this Remove Top and Bottom Padding box so if you remove that padding then you wouldn’t need to specify an absolute height and then the green would go all the way down to below the Join Now and this would be pushed down.

Member: Okay.

Rick: So both of those issues have to do with specifying a fixed height. Now, sometimes you have to specify a fixed height and when you’re in that situation what you would do then is come over to Skin Design and find the instance where it becomes a problem so for example, it probably gets to be a problem I don’t know, probably it’s a problem in Smartphone devices landscape.

At that point you would tell that selector that it should have a height of auto rather than a height of 85 and so then this media query code will override that piece of code that you gave it its absolute height. In fact, what that would look like is let’s see Feature Box Area so let’s just put the height back in. What you would do with this then is again in that section now you would say .agility #feature_box_area and then {height:auto;}. Now, I don’t think you need that here, I think it would be good enough just to use Agility’s ability to remove the top and bottom padding but…

Member: Okay.

Rick: But I’ll put this in the chat window for you as well. If you put that in, because you have some custom code here it needs to be prefaced by .agility space so that the media query becomes more specific than the original rule but…

Member: Okay.

Rick: But otherwise this would let that height be automatic instead of 85 pixels so that’s your other fix.

Member: Okay, I will do that and yeah. I’ll just take the height specification out of… I think I have a header area height too because I have the header area then I have the large area and then I have the feature box.

Rick: Let’s see header area. There is a height for that too, you’re right although if you remove that height there’s almost no change.

Member: Okay, that’s kind of what I was thinking that we remove… Okay.

Rick: It’s a 5pixel change. If you need it to be 5 pixels bigger what I would do is make the image that you’re using there or whatever it is you’re using there 5 pixels taller.

Member: Okay. Alright.

Rick: So that the… oh, this is height 101 so what’s happening right now is your image is being scaled down slightly so you’d want to make that 490 pixels by 101 pixels because the available space for that image is 490 but you’ve made it 514 so it’s shrinking it down.

Member: Okay.

Rick: And if you just take that Angela and reduce it down to 490 pixels and increase its height by 101 it’ll do exactly what you want it to do.

Member: Got you, okay.

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