Transcript:

0:00

Now that we're done making edits, we're going to double check how the site looks on mobile screens. Since most of the time people are going to be accessing your website from their phone, it's important that your site is adapted to a phone screen.

0:11

I designed this template to already be adapted to mobile screens, but if you made any significant changes, there's a chance some elements could have been moved around, but that's totally fine because I'm going to show you how to check for that and how to fix it.

0:23

Let's start back at our homepage. Click on mobile view. I'll show you how to make some common edits. Now that we made this paragraph a little but longer, it takes up more of the screen that I would like it to so I ‘m going to show you how to change that.

0:42

Let's start with this shape in the background. I'm going to click on it to activate it, and then I'm going to drag one of these dots over to the side.

0:48

Now I'm going to make our text box a little bit wider. Now I'm going to click on the text box and then drag these dots over.

0:55

Now the text doesn't come down as far, so I can eliminate some of the space of the text box, and now I can make the shape a little bit shorter too.

1:04

Now I'm going to click on the image and drag it up, and now I want to drag these buttons up too, and I can do that all at once by clicking in the blank area, and then dragging my mouse until all three of them are highlighted, and then clicking and dragging them up.

1:21

Now I want to get rid of some of this empty space, so I'm going to click this button and drag it up.

1:28

Now I'll check out the rest of my page, which looks fine. And when you're done with the homepage, you're going to click save, and then you're going to exit.

1:38

Your gallery page, unless you added any new sections to it, it should look exactly the same on mobile. So now let's just check the format of the about page.

1:47

Everything looks good here, and everything looks good here. Head back into desktop view and just make sure that everything translated well back into desktop view in case you made any major changes on mobile. When we're finalizing the layout, make sure that you maximize your screen so that everything is in the correct position, because if you keep it minimized, sometimes the screen will shrink some of your elements just to fit it in on all one page.

2:12

So now that we've maximized it, we can see how it really looks, and this area that we edited on mobile looks good on desktop.

2:19

So go ahead and just check the other pages, if you made any edits on mobile, make sure they still look good on desktop.