How to adjust page content to screen size?

Question

As I'm building my page, I am trying to figure out how to make the content on my page adjust to the size of the page. I'm not sure if that or my title is clear enough but as an example i want my page, as i make it smaller, to crumple everything together (keeping everything in its place although everything is getting closer to each other) until it cannot anymore and then switch tablet format and then finally to phone format. Please be specific. Thank you!

Answer 1

I think you are asking about two separate concepts. If you are creating a web page and want to keep everything in proportion as you change the BROWSER WINDOW SIZE, set the width and height properties using % instead of px. Ex. width: 50% instead of width: 30px; This will keep everything the same size relative to the size of the page.

But if you want your site to appear formatted on a mobile device, you need to create a responsive website and that's a whole different game. There are a lot of tutorials on how to do that so start researching.

Answer 2

try using the @media rule of css for varying screen sizes.. for example for a width of 720px use @media screen and (max-width:720px){/all your special css codes/}