Build Your Own Business Website header image

Troubleshooting Responsive CSS

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 responsive CSS in a Galaxy S5 screen. We show how to remove the class in the Thesis Skin Editor that is hardcoding the size of the widget.

Video Transcript

Member: You helped me out tremendously on this before what you did is you gave me the CSS code, I put it in Thesis of course and what it did is centered these 3 beautifully on my Galaxy S5 and iPhones and all of that stuff and this was the code that you gave me you know, it’s this code right here.

Rick: Let’s see.

Member: Because…

Rick: width: 100%; float: none

Member: Okay you know..

Rick: Okay.

Member: I have a very similar problem I’m just showing you this.

Rick: Okay.

Member: because I don’t know if that’s going to help you, very similar problem on this site. Now what happens when somebody views this on a Galaxy or an iPhone. The shifts to the left, it look fine to me but the client wants it centered.

Rick: Why don’t you instead text-align: center to it?

Member: Okay, so let’s go to.. here’s the CSS code so you know, you can just tell me how to modify this or whatever if you want to go you know, inspect the element whatever. I just couldn’t do it.

Rick: Okay, it’s called cashbacksoup

Member: cashbacksoup correct.

Rick: Okay, so make myself the presenter and we’ll go take a look at it.

Member: Okay, while you’re doing that I’m going to try to do text-align: center and see if that works.

Rick: Okay so we’re talking about these. If we go to Responsinator and drop it in. Okay. Well, it looks fine but neither your video nor your signup form seemed to be responsive.

Member: No, Rick just so you know I wasn’t even looking I was trying the text-align: center it didn’t work. What I wanted to say is it’s beautiful, this looks fine. Actually this is centered beautifully, the optin and the video it’s centered beautifully on my actual Galaxy S5 so it actually looks fine, it looks great.

Rick: Okay.

Member: It’s under that but ironically, this looks great apparently on the Responsinator but it’s not centered on my Galaxy S5. Now maybe I don’t know how to do a hard refresh on the Galaxy S5 you know, with the mobile.. Do you know how to do that? Maybe I need to do a hard refresh and maybe.. Oh, this is what it looks like on my Galaxy S5 just like this here.

Rick: Okay.

Member: Not as much space but it’s aligned left yeah.

Rick: Okay. So one quarter, it’s saying its width is 100% so when I come into here…

Member: That’s what my CSS code. Now maybe I should just cut that out Rick so you can…

Rick: No, let’s leave it where it is.

Member: Okay, this is the stuff that I put in you know, what you’re looking at now.

Rick: Because this is the problem right here, the .fp_cta_button_left_left_widget. Where is that coming from? css.css, front page, call to action buttons. Let’s see let’s go back to elements again. It’s saying .fp_cta.button_left_left_widget.

Member: That stands for Front Page Call to Action Button.

Rick: Okay, well can you remove the class from that? Can you remove it from the.. you see if you didn’t have that class it centers itself just fine. It’s the button class on the widget that’s making it do that.

Member: Oh.

Rick: Is every front page widget or does every front page widget get that added to it.

Member: Yeah. I didn’t create this interest. Mike Nickels created the skin but this is not based on anything he’s learned on your course, this was before he took your course, he’s taking your course. There’s a one left_left, there’s a left_center, there’s a right_center, there’s a  right_right.

Rick: Yeah.

Member: So each one has a specific little “do that” there.

Rick: What I would do is look at I mean what you could do here is just add the word “test” to .fp_cta_button_left_left_widget and then do a -test on it and see if that solves the problem without screwing anything else up because it’s this little piece of code .fp_cta_button_left_left_widget there that is causing the problem for that in this case.

Member: Now okay, are you saying to do that in the skin.css and Thesis?

Rick: I’m saying you do it in the Skin Editor in Thesis. Open up that box and in the Skin Editor in Thesis and not so much delete the class but just add something to the class so that that rule doesn’t apply to it. See if it screws anything up and if it doesn’t then remove the class.

Member: Right, got you. Okay so you know, if you want to make me the presenter you can look over it you know, you can watch me do it and make sure I’m doing it right. We have you, okay thank you. I’m going to be able to try to do this quickly so you can see it’s responsible, it’s here, let’s go to Thesis, Skin Editor, CSS.

Rick: No, not CSS, HTML.

Member: Oh.

Rick: Go to the Front Page, HTML.

Member: Okay, let me just save this first okay, create a backup.

Rick: Sure, why not.

Member: “Before Rick messes it all up”, okay. Okay so we go back to HTML and…

Rick: and go to your Front Page

Member: Front page, okay go there. I hear it, now I don’t understand the thing you did make me the presenter because I.. This would be here…

Rick: Okay.

Member: And you’re going to test it up, okay I guess we’re like right here.

Rick: Yeah.

Member: HTML Class, I just put .test at the end.

Rick: Yeah, just put test there.

Member: Yeah, right, right. Okay, let’s do -test so what that does is it inactivates that obviously.

Rick: Yeah.

Member: Go up here save the template, cross our fingers, say our prayers, hit the refresh button. I mean maybe I should do a hard refresh. I’m actually talking okay, it hasn’t screwed up anything here now I need to look on my Galaxy S5, correct?

Rick: Yeah, I’m going to look at it on the Responsinator at the same.

Member: Okay, you check on the Responsinator I’ll do a live, actual, real think I’m a jiggy here.

Rick: Yeah. The problem is.. I mean you hit the nail on the head with the question about how do you do a hard refresh. Did you save the template.

Member: I definitely did Rick, definitely. I do that compulsively, I’m going to do it again, there it is right there.

Rick: Because right now…

Member: It says Template Saved.

Rick: Actually, we’re looking in yeah, okay. The problem with the class negative, not the div we changed it on. So I’m going to make you the presenter, go ahead and take it out of that.

Member: Okay.

Rick: Take it out of that one and put it into the next one.

Member: Okay, I…

Rick: So the left_left open up…

Member: It’s a little hard for me to hear exactly.

Rick: Open up left_left.

Member: Where do I click, here?

Rick: Yup and get rid of test there.

Member: Okay, control X so I cut it out, save it.

Rick: Okay and then open up far left

Member: Right, got you okay. Just paste it into there.

Rick: Yup.

Member: Control V, okay there it is, hit Save Template again and try again, correct?

Rick: Yeah.

Member: Okay well, test number 1 is we want to make sure it didn’t screw up on desktop which it did not.

Rick: Yeah.

Member: And okay and now I’m going to try to do a refresh, I don’t know how to do a hard refresh. Oh, so sweet, so sweet.

Rick: Did it work?

Member: Life is so good Rick when you know what you’re doing.

Rick: Hey, look at that. Excellent.

Member: Which apparently you do.

Rick: So that means you can just get rid of that class off of that widget.

Member: Right, right. Oh, God bless you my friend that is awesome. That is freaking awesome. That’s it, that’s the end of the problem, right? It’s solved?

Rick: I think so, you got to do it on each one of those widgets but yeah.

Member: Correct. But I just felt we’ll do one more. We’ll do one more just to…

Rick: Well and in fact, this time go to far left and actually just delete that class rather than adding test to it.

Member: Okay Control A, back…

Rick: Actually, Control Z

Member: Okay Control Z. What’s the widget though?

Rick: Okay but is it only a one class name or is it a bunch of class names?

Member: No, there’s one for each individual…

Rick: Well, scroll through just let me see.

Member: For instance there’s left_left and there’s left_center, right_center.

Rick: Okay, it was just one class. Okay, that’s fine. So delete it then.

Member: So it’s cool, we just delete correct?

Rick: Yup.

Member: Okay, Control okay yeah.

Rick: And then go down to the left_center one

Member: Just do the same thing.

Rick: Because the reason why it’s a problem is he’s hard coding the size of the widget area and what you want the size to be in that case, is 100%.

Member: Now why doesn’t that negatively affect it when you’re on a desktop?

Rick: Well, because the wrapper is setting the size so the thing that’s around it is setting the size everywhere. I don’t know why…

Member: Right.

Rick: He put a width in the widget as well.

Member: Gotcha, gotcha, gotcha. Just a little over control I guess.

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