All righty, so we're going to do the styling in our app components CSS for our smartphone in the horizontal orientation. So to start with, we're going to comment out a title, we can actually just copy this one. And we're just gonna change this. Okay, and now we actually need to make the media query. So we're going to do at media screen and Max with 850 pixels and max height 500 pixels. So that's essentially taking the dimensions of smartphones and just just flipping the height and the width.

The important thing to note is that these media queries will not apply here. So if there's anything that we need from here, we'll need to add it again. So now let's go into the dev tools and figure out what needs to be changed. Alrighty, so back in the dev tools, we have this button up top here, we can use this to rotate to the horizontal orientation, I would definitely recommend trying both orientations when you're doing your responsive design for other devices. Alright, so let's take a look. In this case, it seems like our title could probably be raised up a little bit.

So we'll change the top value for that. Our mobile navigation looks good. Let's go to the about section. Okay, we can see that this card should probably be wider. There should be less of a gap here that should move up. The image could probably be a little bit bigger.

The text here could definitely be smaller. All right, let's go down to our project sections. So we have two and then one and then two and then one. So we could actually make these images smaller in order to have to two rows of three, like we have on our desktop versions. So we'll try to do that. We can also probably limit the margin or to accommodate that because I believe there's 10% margin on the left and the right.

So we can make that less if we go down to our contact section. Okay, I think that's looking great. We don't need to change anything, you might need to reposition your mail to link here if it's interfering with whatever video is there. But in this case, it looks good. And lastly, the social media icons in the footer, we're probably going to need to add some margin left to separate these a little bit because people will be using their thumbs. Okay, so Let's go back up top here.

And let's start with our home. So we can actually use Ctrl, Shift C, and this toggles on this select an element. And we can actually just click on the element we want and it will bring it up here. So that's sometimes better than scrolling through everything here. Okay, so we can see that we have a top of 30%. So we can just lower that and see what looks good.

Okay, I think 15% is good. So exactly half. All right, so let's go into our code. And let's change that. So we're targeting the main title. And we're changing our top to 15%.

All right, our autosave is on so you can see it refresh there. Alright, so that looks better. Let's now go down and look at our about section. Okay, so let's, let's target our card. So we'll do the same thing Ctrl Shift C, and I'm going to click on the card here. And what we're going to want to do is first we can get rid of this top, I guess so let's just make it zero.

Okay, that's better. We can change our width to be a little bit wider than that. So let's make it 80%. I think we want it to be kind of most of the page or not all the page so we can see some of our background here. And okay, that's looking good. Let's, let's target the card text.

So Ctrl, Shift c card text. Let's just bump that whoops, point three, let's bump that to one REM. Okay, I think that's a little bit better. And lastly, Ctrl Shift C, and we'll click on our image here, and we can increase the height to let's say, 50 I think that's a good, good balance there. All right, I think that's looking, that's looking pretty good. Let's, let's go change that in the code.

Okay, so we're going to start with our card, and we're going to give it a width of 80%. Oops, any top zero. Next we're going to target our card text and we're going to give that a font size of one REM we had the same thing on our smartphone vertical up here. Next, we will target our about image. Just double check that's just about image okay. And about image and we're going to change the height to be 50 H. Okay, so let's see how that works.

Alright, so it's reloaded, I think that that's looking a lot better. All right, awesome. Now, let's, let's go down to the project section. Okay, so let's select the element, we want to kind of select this and we want to go one level down. Yes, this is what we want. So we can see we have the margin here, and when we hover over it, we can see that we have 10%, and it's in the orange here.

And so we're just gonna bring that down to I think 2% is good. That's good enough margin. Okay, so we'll change that. And then we need to actually target one of the images, so we can see we have a height and width of 325. Let's just bring this down. The width matters more in this case, we'll see The height after.

Okay, let's go with. Let's make it a little smaller. Yeah, maybe 245. So we'll Ctrl C Copy that. And double check. All right, yeah, I think that's looking a lot better.

Okay, so we're going to change our project image image to be 245 and 245. And then we're going to change our margin as well. So project image image and we're going to give it a height of 245 pixels and width 245 pixels and our projects. Class, we're going to have a margin zero and then 2% instead of 10%. Alright, let's let's check that out. Okay, perfect looking good.

Last thing to change is gonna be our footers. So let's Ctrl Shift c one more time, let's actually select this one because the first one does not have a margin left. So you can see we selected the vector graphic will just go one up to select the FA icon. So you can see we have a margin left of one viewport width, let's change that to pixels. 10 pixels. Again, you can see it there in orange.

And let's use the up arrow I think we need a little bit more. Okay, I think 2020 is probably good. All right, so let's change that we're targeting the footer icons and then FA icon which is the same as this actually. So I can actually just copy this and we'll change it to 20 You might let's change this one at 20 to make it a little wider. All right, let's check that out. All right, perfect.

So I think that that's pretty much it. We've finished our responsive design for our large smartphone. I hope you can follow my strategy with testing things out in the dev tools, selecting the elements and seeing what fits. Just remember that it's important to focus on alignment, proximity, video, image sizing, font sizing when going over your layout on different screen sizes and orientations. All right, so I'm going to wrap up the responsive design section in the next video. And then we're going to move on to our final steps and then we're going to build optimize and host our project.

Alright, I'll see in the next one. Bye for now.