Alrighty, so we're gonna start by looking at our responsive design in an average mobile phone. We're going to right click inspect this will open up our developer tools. We're going to go to the top left, and we're going to toggle the device toolbar. You can see that I'm already set to pixel two XL. If you go to this drop down, you can see there are other options including iPhones, iPad, you can also edit and add your own custom presets. And then you can also change this responsive to be whatever width and height you want.

So you can do that on the fly without making any presets. So we're going to start with the pixel two XL. The reason I like to use this is because it's larger than most smartphones, and a lot of the things that we're going to do to fix it on this will also help Fix it on smaller phones as well. All right, so the next thing I'm going to do is I'm actually going to fullscreen this to give this a little bit more space. And so we can see things aren't ideal right off the bat, we can see that the video is not the full screen. It's a new aspect ratio now, so that's why it looks like that.

But we need to adjust the aspect ratio for a mobile vertical device, we can see that our title is too big. We want that on one line. Our social icons are also too big. Our about photo is too big. This will need to probably become a full width card instead of the 40% that it is now. Our Resume button will need to be bigger as well.

Our title needs to be changed for our project section but other than that, it's looking pretty good. And our contact section you can see that this is the least right aspect ratio it could be we want again to fill the whole vertical screen, we can also see that our mail to text here is too big as well. So we'll need to make that smaller. And lastly in the footer section, you can see that these icons are very close together, we'll need to spread them out even more than on desktop because you have to take into account people are going to be using their thumbs and you want the icons to be spaced enough apart that they're not accidentally pressing the wrong ones. Alright, so let's go into our CSS and get started. We'll Alt Tab back to Visual Studio code.

At the bottom, we're going to comment out a title for media queries. And beneath that, I will comment out a title for large smartphone vertical and let's get started by Adding our media query, so it's at media screen and max width will do 600 pixels. So because all smartphones are more narrow than 600 pixels, what this means is anything below 600 pixels will apply these styles. So these can be different than the styles that we have above. And the other thing I'm going to do before we get started is I'm going to open up our CSS file twice. So on the right side, I will be doing the media queries and on the left side, I'll be scrolling through the original CSS to compare it.

So I think we're going to start with our video backgrounds. Because our orientation is changing, we cannot show the full width of the video so we're just going to show the center portion. Our container is already set to be 100%. And what we're going to need to do for our video element is give it an awesome Object fit cover property. So we're going to target our video element. And we're going to give it an object fit of cover.

And the next thing we're going to do is we're going to target our video background instead of having a height and width of auto. We're going to give it a height of 100 Vh viewport height and with 100 viewport width, so it takes up the full screen, just like it does on desktop. And we can copy this because we need to do the same thing for the video that's in our contact section. And we're just going to give it to alright so let's go check that out. Okay, so we can see that's what Pretty good, we can see that the text still is not ideally. So we can see that we have this black outline here, we can try to fix that by actually changing some of our elements to be smaller in our dev tools here, the social icons.

We also want them to be smaller. Obviously not this small but for our purposes right now, I think it's actually probably this about image. So let's make that smaller. And we can see that now. Our video covers most of the page here. We could probably also make this one smaller as well.

Okay, let's go back up to the top. Okay, it's it's good now that's that's definitely better. So we can see some of the things that we need to do now, let's start with our home section first. So we're going to start by changing the main title and we'll change our icon size here. So let's go back. And we'll just make this a little bit wider.

So we have our main title here. So our main title, our font size is five rim. Let's try three Ram. See how that looks. And we have our social icons, just copy this over slash FA icon and we're going to change that font size to two rim. And you know what, let's change the about section stuff while we're here.

Let's start Change the card, and we'll give it a width of 100 instead of 40. And let's make the project's title smaller while we're at it. So we can see that our projects title is 2.5. So let's make that two for now. Let's see how that looks. And our contact mail is for RAM, so let's make that smaller as well.

So let's make that 2.5 All right, so let's check that out. Okay, so that's looking quite a bit better as you can See, this can probably be a little bigger than that. So let's go back and change that right now. So we had that a 2.5. Let's bump it up to three. So yours is going to be different because you're going to probably have different texts there so you can kind of judge.

Okay, I think that looks better. And let's have a look. Yes, this is centered now. So that's perfect. are about is looking pretty good. And our title fits here, we can make that probably a little bit bigger.

Our social icons I think are the perfect size. Let's make our main title. 3.5. Yeah, that's perfect. All righty. So before we continue on, I just want to show that sometimes our view can get messed up here.

So when we're going back and we're clicking inspect, you can see that it's kind of zoomed in here. This isn't how it was looking before. All you need to do is go up to responsive And then reset it to pixel two XL and it will look good again. Alright, so we have a few more things to fix. If we go down, we can see in our about section, we could probably stand to make this a little less, we can make it a little bit more see through I should say. And we could also probably stand to make our font size a little bit smaller.

And that'll help create more of a space at the bottom here between the button and the project section. Okay, so let's go do that. And we're going to start with the card so you can see that we have this background color here. We're going to copy this over and then we're going to change the value of the alpha value to make it a little bit more see through. Okay, and next we're going to target our card text so we have 1.23 Ram for the font size. We're going to bump that down To one rep.

Okay, so let's check that out. Alright, so that's looking a lot better, we have some space on the top, some space on the bottom. That's not a lot of text. So keep in mind, if you have more text than that, you might need to have zero at the top here instead of the five VH that we have currently, just to make it fit better in the full screen. All right, and that's it for our about section. Let's go down.

I think we still need to change Yes, our footer icons. So in our CSS, let's check that out. We're going to go down and down down down footer icons. So we're going to be targeting the margin left here. We're going to make it a little bit more. So we can go ahead and copy this And we're going to give them margin left, we want it to always be the same and all the mobile devices.

So we're going to give it a hard pixel value of 15 pixels. Okay, so let's check that out. All right, cool. So they have some space now between them. You could choose to add a little bit more if you want. I think that that's okay.

And yeah, everything's looking pretty great. In the next one, we're going to look at starting to work on our navigation to make it fit better on mobile devices. All right, I'll see you in that one. Bye for now.