Yes I forgot about the mobile design so all the websites we have built so far will look terrible on mobile devices. 😅

If you want to check how your website looks on mobile/small screen. Right-click anywhere on the page and then select "Inspect".

You will see the developer console popping up. On the top left of the console (1), click on the device view. Then you will see what the website looks like in different dimensions of the devices. You can also select different devices (2).

As you can see, it's unreadable. The other one looks even worse. 🤣

In this post, we will learn how to make your website responsive to different sizes of screens. And we will use the first website as example because it's simpler. If you don't have the code, you can download it here.

So why do the websites look so different on mobile and desktop? It's because of the different dimensions of the screen. The desktop screen is a lot wider so it makes sense to have sections side by side. But on a mobile screen if we have three columns things will be squashed up, we would prefer the sections stack up on top of each other rather.

This means we need different styles for different sizes of screens. Can we do that with CSS?

Yes, we can do something called media rule in CSS. Basically we tell the browser to use a different set of styles when the screen width is less than a certain number.

In code, it looks like this. So line 37 specifies the rule, which is screen width is less than 800px, and the styles inside the brackets on line 37 and 41 will only apply when the screen size matches the rule.

And what we want to do is to make the sections stack on top of each other here.

Now if you resize the window, you will see the style change.

But why is each section still so narrow?? Oh it's because we said in CSS each section only takes up 33% of the total width of the screen. Let's update that too.

Okay now it's working as we expect. Check out the final source code here.

This is called responsive web design. Websites should look good wherever people are browsing from.

And this is only a simple example. If we were to do it on Katara & Gingi's page, it would take more styles to make it look nice. And it's harder to do it for mobile when we already finished the desktop styling.

So the best approach is to always check what your website looks like on different screens from the beginning and you can immediately fix some styles when it doesn't look good.

That's it. Now you have had a taste of most aspects of building a website, go build your own projects. 🎉