Can someone please tell me the sizes of monitors can effect my output

Answer 1

Yeah.
If ur website is note responsive,
The size of the screen matters ...
Solution: use % values for a responsive website..

Answer 2

U can make ur website responsive 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.

Answer 3

Resin (streching-shrinking) design not good idea.
Better solution is to prepare 3-4 designs for different size of screen. From small to extra large.
Thus you will be 100% sure your ui will look great in any device.
The most popular solution is to use css framworks like bootstrap or skeleton.

Answer 4

Thank you