Testing on our phone

- [Rik] Again, the only real way to test this is actually trying it out on my phone at small sizes. So either I can type in the URL, which is down here in the bottom left, or I can open up my QR code, I can take a quick picture and open it up and test it out on here. Now again, if I make any changes here, it will automatically update. But we can see here that maybe the logo is a little bit tight to the top. How do we change that? Again, I'm gonna go back to my code and just add some more margin at the top.

So maybe 48? Let's see how that looks. And again, I'm trying it on my phone. Looks a lot better. Maybe what I wanna do is add some more space in between the Portfolio, About, and Contact. So how do I do that? Well, again there isn't any margin in and of A at the moment. So where would I want this? Well, again it depends on which media query.

I might wanna try some of this stuff out at different sizes. I'm just gonna quickly add it into my media query up here, the 660 one. I'm gonna say nav space A, curly brackets. I'm gonna add some margin with eight above, eight at below. Let's see how that looks. And that looks a little bit better. Maybe a little less. Maybe we'll get rid of the eight on the bottom. Let's see how that looks. There we go.

Looks a lot nicer. At the moment, there's a lot of space kind of going on on the page. That's generally because I've got a lot of margin in my sections, which I added a lot earlier actually. So again, if I scroll up the page, I had my margins at 80. Maybe a little bit too big. Might wanna reduce them. Again, I might wanna do this down here at 660 where I changed my grid completely. So the margin between all of them is something like 64.

Let's try that out. So less than 80. Still keeping my eight-pixel grid. Let's see how that looks. That looks a lot nicer. So again, just by adding a few extra things in here and testing them on mobile, I can add a lot of new changes. But again, always try this out on your phone or your tablet device and do some real testing with this before you send it to a client.