How to make website responsive using min-width or max-width?

Answer 1

You need to use media queries.

First, create a seperate '.css' file name it...media.css for instance and <link> it to your html file. Open the media.css file and what you want to do is create some media queries that display different content at different widths, for instance:

@media (min-width: 600px) {
h1{
Color: red;
}
}

This will change all h1 headings to red when the window size is at least 600px or greater.

You can also use max-width to:

@media (max-width: 600px) {
h1{
Color: red;
}
}

Therefore, this will turn all h1 headings to red up to a maximum window size of 600 px.

Hope this helps :)

Answer 2

It is fairly simple, no media queries required unless you wanna go crazy about it.

Consider this example:
.main-wrapper {
min-width: 400px
max-width: 1200px
width: 90%
}

You have two break points here: One at 400px, the other one at 1200px, and anything in between is responsive. This makes sure that your content will never be too squished and will always look nice since 400px is still large enough to leave your content with some room to breath. But it also makes sure it's not overblown in size because it stops at 1200px. of course anything from 400px up to 1200px is responsive.

Keep in mind that these two breakpoints here are not enough to make a truly good looking website. Eventually you will need to learn and love media queries. But this should be enough for start