How to make responsive website

Answer 1

Using media queries,

@media (max-width: 1000px) {
.product {
padding: 10px;
}
}

So you would use this syntax to specify a minimum width (in this case 1000px) and specify the changes in css rules that would happen when width of browser reaches 1000px or below.

Use display: flex too, i use it literally everywhere, search a few tutorials on youtube for that.

Such as, if you have a page where you show all the product cards, so on the container, just use:

display: flex;
flex-wrap: wrap;

This would make arrangement of the product cards responsive, you can use:
justify-content: center; to center horizontally, align-items: center to center vertically.