Build Your Own Business Website header image

Troubleshooting Errors in Responsiveness in a Member’s Site

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

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 errors in responsiveness in a member’s site beginning with the images. We talk about why the images are not responsive and how Agility deliberately scales HTML images because they can’t be bigger than their container. We change the image from a background image and make it a regular HTML image and use absolute and relative position to move the image. We also talk about replacing the background image using Agility media queries or use the BYOB Display Content by Device box to replace both the image and video sizes display in a mobile device.

Video Transcript

Member: Okay, there’s a handful of things. I took your Agility Nude Theme, which is a responsive skin, and I broke it (laughs)

Rick: Okay

Member: So, what I’ve been playing with is, how do I unbreak what I did? I specifically placed some of the boxes on the homepage. On the front page there. Yeah, exactly, so obviously it’s not responsive in any way. There’s a multiple things going on there, one of them is the main menu thing you and I have been talking about for a couple of weeks…

Rick: Yeah. That is entirely up to me to fix

Member: Eventually, hopefully…

Rick: Yeah, no, It’s my job to fix that and it’s on my very short list.

Member: Okay cool, well, what I’m going to do between now and whenever that is, is that I’m just going to have one on my site, that will be the main menu. If you notice, the Become of the Million and login, that used to be another main menu but I’ve already swapped it out. I haven’t swapped out the footer but that’s actually not the responsive stuff that I’m talking about. What I’m talking about is in fact, you see the $5? If you compare this to the yeah, it bugs it over to the right.

Now I can tell you why, because I’ve created a two-column thing and I’ve left aligned it at 50% and it looks perfect on my computer, but obviously, it does not translate the width that’s 50% and…

Rick: Well that’s what it should be. Width should be 50%. The question is…

Member: I’ve no idea… I think I made it 50% of the column…

Rick: How would you do that?

Member: Because I didn’t want it on the right wall, or I left… I don’t know, actually, exactly what I did with this one but it’s hanging out in the middle of the screen, you know, here but then when you go to the mobile device, it’s still hanging out in the middle which is pushing it all the way off of the mobile device.

Rick: Okay, now, I think the problem that you’re having here is that you have, what this column should be, this column wrapper, this should be set to column_1 and this half should be full unless you already got another… because the sum of the column has to equal the whole in order for it to work properly.

Member: Ah, okay.

Rick: Okay? So this should be columns_1, this should be full and then what you need to do is make this just float right instead of float left. And if it floats right, it will automatically just move over here to the right.

Member: Gotcha and it will bot up against the page…

Rick: Edge, it will bot up against the edge of the page on the right hand side and that won’t ever be a problem, because it’s always going to be 100% wide. So what’s going to happen is this stuff is going to shrink down in a 320 pixels wide phone view because this is the supported format, 320 pixels…

Member: Okay, I have an interesting thing going on here as well, right, so I’ve created a number of divs going on. I was trying to link the text of the EP AVAILABLE NOW but the player, the soundcloud player is an iframe and I have that like, that’s on top of the EP AVAILABLE NOW which is an image, which is in a div.

Rick: Sure

Member: So that soundcloud player, I actually can’t control… I don’t know if I can make it responsive.

Rick: Of course you can. In the first place, all it needs to do is move, right. It’s not too big, right now it is 260 pixels wide. So it’s not too big and all you really need is for… pardon me, right here, this is the whole thing, right? All you really need is for this thing to shift down under that or shift up over it, whichever one you want.

Member: Gotcha, that’s actually the EP AVAILABLE NOW, the album cover? That’s actually a background image, that’s just one image and I have the iframe forwarding on top of the image.

Rick: Okay, so…

Member: And then that, obviously the mailchimp thing is not an image, that’s a widget… or maybe that’s part of a mailchimp box, I think I snagged if from DIY themes.

Rick: Well, what has to happen… okay, background images definitely are not responsive, can’t be responsive. A background image doesn’t scale, it just fills up as much space as it can. So, if you want…

Member: No, I have a question about that actually, can you click on store on my menu? And then can you grab your browser window and then scroll up or just pull up to the left then watch what happens…

Because I have magically, somehow made that image scale and I don’t know I did that…

Rick: Which image?

Member: There at the banner, that goes across the middle there.

Rick: This one here, Become One of the Million or this one here?

Member: Yeah, the one you currently hovered on.

Rick: Think with style, you didn’t make it magical…

Member: (laughs) It worked, I was like, wow, cool…

Rick: It’s the way Carta works… Carta very deliberately scales images, the html images. So the html images can never be bigger than its container in Carta.

Member: So then, if I did that with the…

Rick: Or Agility, whatever this is, Agility, I’m sorry…

Member: It’s Agility yeah. If I did that with the front page or through, then it would scale?

Rick: Well, instead of a background image you could make this an html image. And as in html image, it would, in fact, scale. The problem with that is that…

Member: Could I float the stuff over the top?…

Rick: Well you can float the stuff over the top because you can use absolute and relative positioning to put that iframe over top of this image. That’s certainly possible, but you have to decide what you want it to look like when it’s supposed to be responsive.

Member: Okay.

And that’s really, the critical thing here is mapping what this should look like in each of the responsive sizes. Because until you know what it should look like in 480 pixels wide, what it should look like at 320 pixels wide, until you know that, you don’t really know what tools you have to get in order to get there.

Member: Okay, I see. So, yeah, I can map that out, so once I’ve determined that, then what? Could I actually have it to completely replace itself with something else when it has a media query?

Rick: Well, you can replace a background image with a different background image using Agility Media Queries or you can use the BYOB Display Content by Device box. You can replace that whole thing on a mobile device with something else using the BYOB Display Content by Device box.

So I’ll just give you an example of it, it’s not an example specifically…woops, not this one…

Member: That will probably do the job because you know, when it’s on a mobile device the text is too small to read, anyway.

Rick: Right, on this site right here. This image is way too big, in fact, it’s bigger on a bigger monitor, it’s way too big for a mobile device.

Member: Sure

Rick: Not only that, but when you scale it down, the text is too small to read on mobile device…

Member: Sure

Rick: So, the way this site works is, it has this version of the slider for a desktop and tablet devices and it has an entirely different version designed specifically for smaller mobile devices for phones.

Member: And is that with the BYOB Box or the Agility Media Queries?

Rick: No, it’s with the BYOB Box. The BYOB Display Content by Device box.

Member: That sounds like a great way to do it.

Rick: It allows you to swap stuff out.

Member: Okay, well great. And then I’ll tackle that top part, I have a couple of other questions about the bottom part of the page.

Rick: Go ahead.

Member: Well, first there’s a, I was reading… shoot it’s in my other browser which has like 35 tabs open… I’ll have to send you an email but I felt like, I found an article about a guy who was trying to embed a youtube video in a responsive manner and he put together a whole process for it. I want to get your opinion before I decide to follow his guide, but essentially the music video breaks the responsive nature, you know, the embed itself actually, hangs off the side of that third column. And I was wondering if you have ever come across that and had to deal with it?

Rick: Well, I think it’s more to do with the wrapper around it than it is with the video itself.

Member: Okay

Rick: Because the video itself should scale no problem…

Member: That’s what I was talking about, right there… so It actually hangs up the side on the… it goes over that…

Rick: I think it’s because the thing that contains it is… let’s see… Columns_312, so you got a one third column and a two thirds column.

Okay, so this is the one third column, and inside the one third column, we’ve got that video box, and then we’ve got a tile… okay, it’s this thing here… see, you’ve given it… you’ve forced it at the 270, right…

You shouldn’t have to do anything special in Agility for the youtube videos or vimeo video or daily motion video, for any of those videos to be responsive because it contains the code to make them responsive.

Member: I definitely remember doing that potentially, for whatever reason, I think I know why. It was off for like a pixel or two. Like if you’re on… I don’t know, I guess you can’t actually, but on the main page, on the front page of the website on a computer, it was off by a pixel and l it was driving me nuts… So I closed it to 270.

Rick: Well, you can use the Agility Media Query though, let’s see, where are we? What did I do with your site? Here it is? Yeah, here it is. You can use the Agility Media Query to fix that though, for the phone, if you need it to be 270 in this, all you have to do is change it for… so you take, #front_page_music_video_black_box and instead of width: 270, make it width:100%.

Member: I tried doing that, I’ll mess around with that again.

Rick: Well, I’m going to show you where to do it.

Member: Okay

Rick: This is Carta but it’s exactly the same thing. Under Skin Design, scroll down here to the Custom Media Queries…
Member: Yeah, I haven’t messed around with these yet.

Rick: I would choose… I think it’s probably only failing in smartphone portrait, but if it’s failing in other devices, pick the biggest device in which it fails and then just add the code here to make that width 100% rather than…

Member: Now this will be CSS, right?

Rick: It is CSS, so again, if we look at this example, just take your selector that you’re using right now and you would come over to here, wherever that is, and then you would type .agility first and then your selector #front_page_music_video_black_box and then width:100%;}

Member: Oh wait, you don’t have to put the brackets? Oh you do…

Rick: I do, yeah… yes I do, I just failed to to do that… yeah

Member: Right, right.

Rick: Now you need .agility (space) in front of this in order for this to work and that’s because this is custom code that you wrote in the first place, and so the way Thesis work is it puts all of the custom code at the bottom. But the Media Query stuff sticks this stuff in the right place which doesn’t have to be at the bottom so you need to make it more specific by adding the body class agility to it.

Member: Okay, yeah, it makes sense.

Rick: And then in that case, it will go to 100% instead of 270 pixels and you’ll be fine.

Member: Awesome. Awesome. Okay, cool… so, I took note of that obviously I’d be able to check out the video later but my last question is then, the ⅔ column that is opposite that ⅓ column…

Rick: Here… I put that code in the chat window for you.

Member: Oh, great! Yeah, I copied the whole thing, I have it written down on mine as well but thank you, I’ll grab that too. Yeah, I’ve had to… like you said in the forums, the necessity of all, whatever group needed it so I had to learn it so I started learning CSS.

Okay, cool. So the HOT MERCH ⅔ box, I have to force this to like 50 or 65.5% instead of 66 because I couldn’t for the life of me, get 50 pixels margin on the right side of that box…

Rick: That’s fine.

Member: So I forced it but I think that’s also messing with it but if you, again, if you take your screen and scale it to the left, you’ll see what happens, the 3 posts, I had to force them to be 32% of the ⅔ box and now they’re obviously doing this because they’re still being 32%.

Rick: Right, so you need two things going on here. One of them, for this one, you can probably just give it a minimum width or no, what you want to do is at… at what point… okay, so, at…

Member: Yeah, first of all, see the ⅔ is floating over the ⅓ …
Rick: Yeah… so right here…

Member: And then…

Rick: At the tablet, portrait mode, you want to take this and make it 100%

Member: Okay

Rick: Okay, so you’re using the Media Query and this thing that you used to make 65%, you’re going to say .agility and then whatever the selector is and then say, 100%

Member: And that will force it below the ⅓ box?

Rick: Yes, it will force it below the ⅓ box and it will make it to full width. Then for these things, what you have to do is, it doesn’t really matter where you do this, but you have to say min-width whatever they are…

Member: min dash width?

Rick: Yes, min dash width, which means they won’t get any smaller and so what they’ll do is stack instead.

Member: Oh, and then… but that’s, they’re already pixels though, it can’t be percentage…

Rick: Right, but you can have a width of something percent and then a min-width of a specific number of pixels…

Member: Oh, great.

Rick: In fact, that’s what everybody does. Right, that’s how you make these things stack and jump around. Is you give them a flexible width until they hit their minimum and then you don’t let them get any smaller…

Member: I’m so excited!

Rick: As long as they’re floating, they will float into correct position.

Member: Okay, that totally makes sense. Okay, Wonderful. Rick, that will give me plenty to work on until the weekend so thank you so much for your time and let me know whenever you want me to test the min menu.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment