Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 11

All right, welcome back. We finished building this whole page in the previous videos and we are completely done with or at least done with the desktop version. This is the entire page but it's not responsive yet. We only built the desktop version so far. so if I inspect right now and I turn on the mobile mode you'll see the whole page is broken completely because we only built the desktop version so now we have to go and build a mobile version and make this whole thing responsive currently everything is completely broken so that's going to take quite some time so we're going to divide this into three parts and this is part one of that. Now first things first let me go to globals.css and create a breakpoint for extra small screens and I'll set this to 480 pixels. Now, let me also create some padding in our container component so our content isn't at the edge of the screen right here. Let's go to container and add some horizontal padding. And that looks better. Now on extra large screens I want to give less padding and on even larger screens than that I want no padding. Now next let's do something about this super header. So I'm in the super header component now and the first thing I'm going to do is hide this currency name. So let's put this inside this span element and I'll give it some classes. make it hidden by default and only visible on the MD breakpoint. Now let's see if that works. Okay so MD isn't enough. Let's hide this at the LG breakpoint. There we go. So now the next thing we have to fix is this code and this is going to be a bit advanced so just follow along and copy these exact classes. up here. Let's add the flex wrap class and then down here let's add some more classes. I'll give it order of three and grow and full width. Let's also give it text center and some margin top. And now we get this layout. and this is responsive on small screens now we just need to reverse the whole thing on larger screens so on MD let's reverse the order back let's try order 2 and and then let's undo the margin as well. And okay, that does not work yet. So let's remove the flex wrap as well on the empty breakpoint. Okay, so that does work but the order is wrong. So this is not supposed to be 2 It not auto either Okay so I checked the documentation on this and we need to actually use the revert property And now it's back. Now let's reverse the width and also the grow property. and now we're back to our regular layout on desktop and on mobile we are in this okay so this is buggy still there we go on mobile we get this responsive layout and on desktop we're back to our original layout. Now we need to do something about this navbar. So let's open up that. now firstly I'm just going to use the same technique I used before on this list of links so with order three grow full width margin top and all of these classes that my AI is giving me and also add flex wrap up here and change this MD to the exhale breakpoint. Now let's see what happens and we get this new layout. So this is already more responsive than it was before but we also need to create a mobile nav bar now. So let me just use the hidden class here only show this on the empty breakpoint now let's see so it's not perfect at this exact size but it does hide the links for us now we need a menu icon so we can show the mobile navigation we'll use this one and as always put this inside our icons file with a label for screen readers Now, I'll add a button over here, which will be this menu icon. And I'll also increase its size to 24 pixels. And there's our menu icon. Now let's add some classes here. On the MD breakpoint I want to hide this button. And that works. And below the MD breakpoint we see that button. Now here let's add a flex column and fits the gap. And now we get this list of links. So up here let's create some toggle nav function. And also let's add some state here. So first I'm going to have to add the useClient directive at the top of the file. And now I can create a state here and just call it active and set active. I will set this to false by default. And now here I just have to toggle that. And then just add that to this button over here. Now we just have to hide or show this list of links based on that state And there we go Our navigation works now. also add a cursor pointer over here so we know that we can actually click it. Now on the empty breakpoint let's change this to a flex row so our desktop version also works. And there we go. So everything works now. I just want to move this button down here inside this div and turn this into a box and change this gap up here as well. And that's a bit better. And with that, our navbar is fully responsive. Now if I shrink the screen, the next thing that is interfering is this headline. Currently it's really large, so let's head into the hero component. And to make this responsible, I'm actually going to use the clamp function. And over here I have this clamp calculator with a bunch of values that I get from these classes. basically take the largest and the smallest value that my text will ever be plug these into the the calculator over here if I shrink this completely and then I string the text text as well this size looks good and this is equal to 2.25 So I plug that in over here as well and the maximum value as well and then I just plug in the viewport range. And the viewport range is right here from 320 pixels all the way to a large screen of 1440 pixels. So we just copy this and paste it over here. Remove all the spaces because Tailwind doesn't like that. And there we go, we have a responsive headline now. And this will just automatically shrink or increase size based on the screen size. Now back here, let's go to the section heading component and do the same thing. So let's take this and change it to XL. try for Excel again and then just plug the minimum and maximum values in here I won't change the viewport range I'll just copy this and paste it in here and of course remove all spaces and now all of our section heading components that we use throughout the site are responsive. I do need to refresh the page to actually see this to work. There we go and now they're responsive with the screen width Now let's also fix this error real quick. Let's head to icons and just change these attribute names to fit the JSX names. There we go and this error is also gone. Now the next thing that is troubling us is this benefit section So here I am in the benefit section and first I just going to change this to a single column and already that looks really good. Let's remove this gap and apply to both axes and refresh the page and there we go so that actually looks good now on the MD breakpoint let's change this to two columns And let's see. Oh no, actually we do need three columns here, so let's change this to three columns. And there we go. Back to our original layout. And this is fine for desktop and when we run out of space we shift to this layout. So this is already responsive now but I do want to do something for this image. Because currently it's way too large. So let's do something about that. Let's put this inside a div. we'll turn this div into a FluxBox to center the image. And here I'll just add a minimum width of 72 and a maximum width of 80. Which is 320 pixels. So now it doesn't get too big and it doesn't get too small either. And with that our benefits section is already responsive. Now moving on we do need to do something about this destination section. So first I'm just going to change this from a grid into a flexbox and add the flexwrap property and I'll give this element basis zero and grow and a minimum width of 60 and also make this a container because we're going to use container queries to make this whole thing responsive let's put all of this inside a new div and in here let's turn this into a flex column add some gap and on the MininXL container query let's change this into a flex row let's also add basis zero and grow to both of these children and let's see what we have now Let's shrink the screen and now we get this new layout. And if I shrink even more we get this. And on mobile we get this single layout where each element is just stacked. and this is perfect for our needs so just a couple more classes this whole section became responsive Now, we need to do something about these arrow buttons over here. And to do that, we just need to add a flex wrap up here. I'll also add some margin bottom here to separate both elements. And that's it. And with that this destination section is also responsive. And we're pretty much done with this one.