How do i make a website responsive?

i recently started a mini project and i want to make it responsive on all devices how do i go about it?

1 Like

Hi!
You need to use Media Queries on your CSS file. I attach you this link to read basic rules about that: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Media queries are easier than you would expect, imagine them as a block of CSS code where you write code that will run ONLY if the size of the window will be the one that you specified.

For example, you have a class called .my-class and it has a white background color. You want to make that background black only on mobile devices.

.my-class {
    background-color: #fff;
}

@media (max-width: 480px) {
    .my-class {
        background-color: #000;
    }
}

It seems difficult but it is not. You declare @media and inside the parenthesis you specify a size rule.
max-width: 480px means that all the code inside that block will run only if the screen width is less or equal to 480px. If you resize your browser window you’ll see the difference. The background will be white, but when the width of the window will be 480px, background color will change to black.

You can define whichever size you want on parenthesis. There are common usages (480px for smartphones or 768px for tablets) but I think they are changing fast because of the incredible numbers of mobile devices sizes today (just think about the smartwatch!).

You could also use a framework already built with responsive rules like Bootstrap, but I suggest you to learn how to make a responsive website on your own and then start to use frameworks. Once you start, it will become easier and clear :slight_smile:

4 Likes

Woow thanks @lbluigi i have a clear understanding of how to go about it now.

1 Like

You can also look into using libraries such as bootstrap, foundations, purecss, or others that have a “responsive grid”.

1 Like