Making everything responsive
Summary
In this episode we will make our website responsive, we will start on the tablet breakpoint, then mobile landscape and finally, finish with mobile portrait. We will also build our custom mobile menu.
Watch Here
Listen Here
Weekly tips
Pay attention to the active element state
Build one responsive breakpoint at a time
Style the burger menu on desktop
Don’t put the menu button in the nav link wrapper
Grids can have a different number of rows on every breakpoint
Double check your responsiveness with preview mode
Transcript
Joseph: The button has been pressed. We are recording this episode. It started already. All right, what's going on? We're back. We're back. All right. So in. Episode, video thing we are going to finish, or I guess start and finish the what's the origin tab section and get the website responsive. So those are our two tasks for this video.
So let's switch screens here. All right. So there's a couple of components we're going to deal with the tab section. So the first thing we're going to. Is figuring out how you want to design and style the tabs. First we want to determine location. Do you like left align? Do you like center align? Do you like right align?
Joel: I like having these top, these tabs aligned on the left.
Joseph: Okay. So do you want the tabs bigger? Do you want spacing between them?
Joel: I want them to no space. Okay. What I would like them to do. I would like them to have them defaulted to make sure that they start on the left one. I wouldn't want it to start on a random one.
Joseph: I think that would be.
Default. Yeah. Sorry. I think that's the default. I don't know how you would set a different thing. Okay. So is how has the text then inside of that? Because it seems like we take away those capitals sees very small
Joel: that's teeny tiny. Yeah. If we changed this to lower case. And these are a little bit small to mid button text would be about right. I think that was like a buck 75.
Joseph: Yeah. So there's two things you could do. Number one, if we check the text from the submit button, we can use the same class, although I'm now actually realizing there are different colors is four. Okay. Nope. It's button is farmed. All right. So we will have to make our own.
Okay.
Joel: All right, so we'll pop that up so you could see what's going on here. Okay.
So what do we want to do here? We want to make our own class for the font size. All right.
So for that is, are we literally just, is it just size? So we do tab what are we calling these origin?
Origin tab TX origin tab. What would what is a good naming convention?
Joseph: Just for, yeah. Whatever you want. Yeah. Whatever you'll be re looking up.
Joel: And then we're naming that probably 1.75 rounds.
Okay.
Text.
Joseph: All right. So the next things we want to style. So there's three, when you're dealing with tabs, there are three. What would you call those? Not phases, but three variation stages. So there's your regular tab color. And then there is a hover color, and then there is a active. Or active setting. So the first thing you'd want to do is determine what do you want your resting state to be in?
So that is what we are designing right now. If we grab, if you go up on the, if you go up on the, what is it not a D pad, but your arrow, if you click up on the arrows tab on your keyboard, that'll bring you to the parent element. So you can now give this a class
Joel: nice. And when it's not selected, what if it was, this are off.
Joseph: It's pretty close to the background color, so it is pretty hard to
Joel: let's see. So how about the grave than the original gray that it was?
Joseph: Yeah. If that's what you want. Yep. We can certainly do that. We even ready to start with that. All right. And then we want the active tab.
Joel: Oops, sorry. I'm flying all over the place here.
All right. How do we get the be active
Joseph: tab? So you will go click on the active tab. The one that's active first. Yup. The one that has the
Joel: active color,
maybe. Okay.
Joseph: All right. Now we need to first give it the same class.
Joel: Okay. So let's dissolve origin past.
Joseph: All right. So you can now see that says current. So that green thing right there now, when you're designing this, that will be for whatever is the currently selected items. So whatever you change his background to will now be for the current selected item.
So you could change it to the green and give it a white background or white.
I'd probably go green the green. I guess you can go whatever you want.
Joel: Yeah. We haven't used the yellow and the red very much. So I think you should try to incorporate.
Joseph: Yeah, I think it just was hard to integrate those colors into the design. All right. So yellow is active. All right. And now what we're going to do is set a hover class. So one thing we have not talked about, so setting up a hover state oops. So you to undo right now. Cause you're not in the active state when you went down to the text. So you need to go back, just click the button and you should be able to,
what do you do? All right. There you go. And you can now just go change the font color in that. Okay. Okay. That failed your contrast ratio. So we need to change that. Also fail that one says. Yeah, that yellow, just as a, there you go. I guess it's not that different. It just it's maybe not reading it. Okay. So let's grab just one of the regular buttons. All right. So we first want to apply that class.
All right. So you'll notice on our selector. If you go back to the class you just gave it there's that little arrow to the far right far, right? One more. Boom. Okay. So these are all the different states that an object can have. So we're going to go hover real quick. All right. So now we're designing whatever will happen to the hover.
So we can now make the changes. So maybe we want to have the text color change. Maybe we want the thing to go lighter. Whatever you want to do
threads find, even though it's showing fail. I think we can just move ahead with that and all right, so now if you click the preview button, you can now test stuff so quick on some different things. Okay, boom. There we go. So now your active tabs are coming up the right color. And the reason the one is just coming up with red is cause we still have that pain open inside the designer.
So that's why that one's coming up red when we're not on it.
All right. So not the prettiest thing ever designed, but that is how you would design and set up tabs. All right. So now it is about adding the content. So you can now collapse the. Icon or you can collapse the tabs element in the navigator.
Joel: Okay. The one other thing I was hoping we could do is add like a perimeter border around where the texts would go.
Joseph: Sure. That's what we're gonna work on. So if you want to first close the tabs thing and the navigator.
Joel: All right. This thing,
Joseph: just to know, just the one that's at tabs. Oh, I opened it up, collapse the tabs menu. There you go. All right. So now we can open up the tabs content.
All right. So those are your three different pains. So first just grab the tabs content. Alright. And we can now start designing that. So do you want, are you wanting a border on it? Is that what you're wanting? Okay. So let's scroll down to the border.
And we can start styling that. So the middle button means it'll be a border on all four sides, and then you can do a wit and all that good stuff.
One month,
yeah, probably two pixels, the good order size. Alright, then you'll also want to. Right now you switched up one more note tabs content. All right. The other thing we'll want to do is go up after you're done with that. We'll want to give it some padding so that all the copy is off of the edges.
Joel: All right.
Joseph: So we can go up, go to the padding. I'd probably give it a 1.5 REMS aside, maybe one REM we can check.
And then you screw it. Dragged down. Hold shift. There you go. That's probably, yeah, that's good. There may be REM even just so that it's in a decent bit or that looks good. Yeah. All right. So then the thing is, do you want to have a separate background color, like a little different maybe are off white or maybe.
All right, so we can go to the background color. There we go. All right. So now you just have to design the content side.
Joel: Okay. Then I can just go to each one of these and then go to the paragraph.
Joseph: So that was everything on our, to do list for this website.
Joel: Wow. We're knocked that out.
Joseph: So from the looks of things that we got, what we were trying to do, we got a completed by, I would say, I feel like I don't know how I'd grade us in the design department, but the user interface will rough, but we did it. We did. All right. So our next task for this video is we are now going to click the number two and we are going to start making sure it is responsive in tablets.
Joel: Sorry, the slough some fails.
Joseph: So let's scroll all the way through slowly and see what we're working with
Joel: so we can see, burger menu. We can see the header.
Joseph: So let's, maybe I'll just make a list. Let's make a list real quick. Okay. So we want to do ergo menu header. Okay, going down. Yeah.
Joel: Alright. This worked out well. That's our newspapers. Good? Yup. And the map is good. Yep. A man F T collection I think is good. Yup. I would say if we're happy with that farm is good. I think that maybe could be a little bit, I would come maybe condense it a little bit more, but it's. Separating fact from fiction, I would say is good videos are good and put her, oh, we didn't finish the footer. We had our tech difficulties in our last video.
Joseph: That's right. I forgot to put that. All right. So footer links. All right let's go do, that's pretty simple. So let's start at the top.
Joel: All right.
Joseph: Do you want that on one line of text?
Joel: Yes.
Joseph: Okay. All right. And because this is a custom class, you can go ahead and change the REM size there. So you can go ahead to walk around or something.
Joel: Just adjust it down. Okay. All right.
And then when you're happy with that,
Joseph: all right. But I think we want to do a footer links, which we want
Joel: to do on desktop.
Joseph: Yeah. Perfect. All right. So now we did that. So now we can carry on with our responsive setting.
All right, so let's go back to tablet. Let's collapse, all the classes, the navigator. Alright, ghost, start back on the menu. Let's see if we can't figure this out. You're in control. So click now.
All right, let's pause this. I kinda actually just want to log in and play around with this for a second. So we're going to pause the video, see if we can solve it and then we'll resume it. I'm just cheating. All right. So I'm back in control. Let's see now. Where did I just see what I can figure out?
All right. So it's coming up good on desktop, or it's going to bring it down. And this is where we start having problems. Let's look at the nav bar. So right now I'm looking for anything that is blue. So right now I'm just gonna reset everything and that will reset it to the the base break point settings.
So I want to get rid of every custom setting we put on this now, just so that way I can see what's affected. Okay. So somehow my nav menu and the menu button is coming up and many.
Oh, wait a minute. Is. There we go. Okay. So here's what happened. We must have at some point drug the menu button into the nav menu. And when we lower the break point, we actually hit the nav menu. So because it was inside of it, it was getting hidden. So if I drag that back down, it's now hidden. Okay. So there we go.
All right. So let's see. I think then that looks good. I probably want to actually make it a little bigger. So we'll open this up. We'll grab the econ. Is that, I can't remember if
Joel: that was pretty impressive. Detective work there
Joseph: and there's some times where he'll sit there for awhile and what is going on.
All right. We're going to make this a little bigger. So I'm gonna actually grabbed this hit shifts are changing it to also. Right here is just going to make it easier for when somebody clicks on it with their thumb, because that whole area increasing the padding. All right. So somehow this is a little too tight to the edges.
I think. So I'm going to do is I can either brand wrapper. We're going to give this maybe just, how would I do this? What's the best way to do. All right. Actually, the best way to do this is to grab a div, grab this div, put it here, put the NAB rapper in the div, and then we should actually be doing this back here.
And then we actually get a name is div page padding. And that now there you go. That just set him off agile.
All right.
So while I'm here, all I'm also seeing that this looks weird this div in the footer. So we're gonna open up this footer nav and I could try centering the text. How does that look? That it looks a little better centered.
Joel: I can't quite see it. You can scroll.
Joseph: Oh, interesting. I was just a little too zoomed out, so actually to make this yep.
Joel: There you go. Wider.
Joseph: Okay. I don't
Joel: know. Maybe just a pitch for the double left with that alignment. Maybe that whole box.
Joseph: The thing is it, look, it's centered inside its item. This,
Joel: oh Gotcha
Joseph: image. She sent center. There we go. And then all of a sudden, this. And it just looks weird because the
Joel: blue flag is maybe a touch wider. All right. That works.
Joseph: Yeah. That's what I do. Yeah. All right. So let's go down to our third break point real quick. All right. We're still happy with the menu.
Joel: That's good.
Joseph: All right. Are we happy with this? The news?
Joel: Good. No in this case are, yeah. The map is still phaseable some, you don't get as much of the effect with the map scrolling just because your song that's good.
Joseph: All right. We definitely need to title. Oh, interesting. Why is this? Yeah. What class? This is H two text color white. Let's do, actually. That is decent. All right. Anything you want changed here? Looks good. No, it's good. Do you want to go down to one video per actually that's the one good question. Do you want to go down to two?
Joel: Oh, yeah, you're doing that too. Wide grid would be nice for that now.
Joseph: All right. So grid, you can make changes and it will not delete its way down. So what I can do is in here, I can go grid.
I can get rid of one of the columns and it will still be there on my other break points. So that's still three. So that was it. All I needed to do is delete one of those and that. Huh. All right. All right. So we got all these, do you want to go down to one video per yes. Okay. So we made that a grid, so I can just go down here. Delete one of the columns, boom, click done. Do you want to leave this as three or
Joel: spacing between the bottom video and the footer?
Joseph: Maybe. All right. So for that, I will grab this second. And we will just change the padding vertical to padding. Do you want it changed everywhere?
Joel: Yes, actually it was a matter of fact. That would be good.
Joseph: Alright. That's great. This section. Oh, interesting. And see, petting vertical. So we're going to go to pad XL. Is that enough? Or do you want me to go Q X let's do a huge. Perfect. Boom, boom. Okay. All right. All right. And then let's go down to this one. All right. So our text is little big here. Do you want it on two lines for
Joel: yeah. That's okay. On the, on there that would look, probably look weird. I'm just one line.
Joseph: Okay. All right. So that's good. This text seems decent. All right. So we definitely are going to want to go down to one on this. Cause you can see there's some issues. So this would actually break our site. So see this how this is it's ruining it so we can actually fix that. If we go to our top break point, let's say we want it to stay two sections that we just didn't want the scroll off.
We can actually go over to our page. The thing that wraps all of our content and click overflow not displayed. And now if we went back, you would see that the text, the copy is still knocked up, but I'm using my mouse to scroll sideways. It will not scroll. So anytime you want to just make sure nobody can actually scroll sideways.
You just enable that. So that's like that, but we're still going to grab our section. We're going to go into the grid mode. We are going to delete one done. It's pretty decent. Boom. All right. This does get a little long. So I actually think, let's see how it looks here. Let me here's okay, so let's actually go here.
Let's grab, let's give us a custom class and we're going to call this fact copy. And actually I'm gonna drop this down to 0.7, five REMS. So that's a little low. We're going to go 0.8. And then I need to open up my other classes because that did not necessarily change those because there's, don't have the same class that you know this.
So we need to now go fact copy and fact copy. Then we've got our videos displaying one, this gets really crowded down here. So let's actually grab this and let's just do this. Let's start with two, but I actually think we're probably just gonna want to do one per and then it does look a little close to.
All right.
So the one last thing we want to do is we already discussed that when you hit 1, 2, 3, 4, it just shows you what it looks like in that. So we're actually started at one. We're going to drag the whole thing down and watch how it will slowly respond to all of them to make sure it looks good on everything.
Okay. So that gets a little weird if you're on a small. Device. So we actually on our mobile, we will actually want to change that direction. You would scroll down and we're actually gonna grab this and we're going to grab the copy and we're going to change this from 700. Let's try seven. Let's try six. Let's try five. All right, let's go with five.
And that's what that looks like here. All right. Let's go back to preview mode and let's try these sections starting all the way up to the top. Scrolling down to our NFTs. Good looking good. Looking good. Very nice to go down to this section. Looks good. Let's go down
here. Come on. All right. We'll check. All the way down. I don't know. Do you like that? That gets weird where the text goes to two lines. What do you think?
Joel: Yeah, I don't I'm going to be awfully small. Yeah. It's going to be tended hard to read if it's in one line.
Joseph: All right. There's our videos. We're going to go down that aisle responds. Our is going to look at our footer ships, start on the widest.
All right. Those that copy is a little small on the desktop. So let's go over here. And actually, I don't think we gave this section a max with everything else has a nice. This section, we did not give it that. And that's because it is not in our main wrapper. So let's go down to our footer. Let's collapse.
All these, let's open this up, let's go to our footer and let's just give it a max with of 80 rum and then let's send you that. Alright, there we go. Now that kind of stays in, but that copy is a little small. So let's go 1.5. Maybe even 1.67, jot this down to a height. 1.1, then we can go 1.8.
All right. There we go.
Joel: Okay. By nessie, I think we're onto a
Joseph: well, all that was funky. Thinking about it. Zoomed in. Okay. All right. So that was making it responsive. We did it. We've figured out our menu button. That was weird. That happens a lot. You can definitely be like what's going on. You get frustrated and realize it was something super simple.
I don't even remember when we did that. I think it was when we switched out the web flow custom container for our new one, we must have drug it into the wrong spot. So yeah, little things can definitely start to annoy you. We prevailed. Yes. So our next video, we are going to add some animations, some interactions.
Okay. The same thing. And then we will what will we do after that? And we might be done. That might be it. We might, we'll come up with something I suppose, but that's. Yeah, we'll call it something, but that's it. That's all our goal is to complete and there's obviously more to learn.
But let's knock it out in the next one.
Joel: We'll look forward to seeing Nessie come to life in the next video here.
Joseph: That's actually what we need to do we to add a live cam of some locks onto the video or something like that or on
Joel: I bet they're just have funny,
Joseph: so we probably won't do that. So we should probably cut. Part out. Cause I don't think we're going to do that.
Joel: Yeah. We were just learning about the Nessie what was that?
Joseph: The watcher group or something?
Joel: Yeah. From back in the 1960s and seventies. So that was pretty impressive stuff back then.
Joseph: Indeed. All right. All alright, let's shut this video down and we'll probably cut it earlier and people are like, wait, what? It was just randomly over, but all right. We're outta here!
