html - How do I make my webpage adjust its according to the screensize?

Question

On my Desktop monitor, the website is perfect, however, when I view it on my laptop, the content is out of place

 <meta name="viewport" content="width=device-width,initial-scale=1.0" charset="utf-8">

Have tried this.

width="100vw" height="100vh"

Have tried this too.

Have tried to set container's min and max-width/height. None of it worked. Does anyone have a solution to this?

question from:https://stackoverflow.com/questions/65896345/how-do-i-make-my-webpage-adjust-its-according-to-the-screensize

Answer 1

Use Media querys or incase of framework use the relevent class

standard Media Query Sizes

320px — 480px: Mobile devices.
481px — 768px: iPads, Tablets.
769px — 1024px: Small screens, laptops.
1025px — 1200px: Desktops, large screens.
1201px and more — Extra large screens, TV.

Example of bootstrap framework

col-xs for smaller Mobile phone (devices with resolutions < 576px);
col-sm for larger mobile phones (devices with resolutions ≥ 576px);
col-md for tablets (≥768px);
col-lg for laptops (≥992px);
col-xl for desktops (≥1200px)