Make a web page scale according to screen size?

HTML-CSS
1

Hello there,

This is my tribute page project that looks terrible in anything but fullscreen view.

How do I make a web page scale/rearrange itself appropriately according to screen size? What CSS properties or Bootstrap classes do I need to use/pay attention to?

Thank you very much!
Chloe

1 Like
2

there are plenty of things that makes the size adjustable…
but i will try to introduce the simpllest thing.
on your css… most of unit size are static ( in pixels )
for example
width: 400px

changing the measurement unit to a percentage could make the result more adaptable to the window size.

for example
width: 80%

hope this simple thing helps.

2 Likes
3

If you want to use Bootstrap 4, you’ll find its grid system perfect for your situation.

You want a responsive three columns layout and that’s what the grid system can help you achieve. You’ll probably have to look a bit into the reordering classes as well. Those can help if you want to reposition your columns on certain resolutions.

As for images, you can look at the responsive and fluid classes.

Here I made an example for you to look at a basic three column responsive layout in which the columns reorder themselves under certain resolutions.

2 Likes
4

Thank you! I’ll have to learn how to use it better though, just converting all pixels to percentages gives me the same problem of everything becoming small and out of place when the screen size shrinks. Thanks again!

1 Like
5

Thanks for the links and the example! I think these will be really helpful once I learn how to use them!

1 Like
6

Hey Chloe, I made changes to your code to demonstrate responsive design using percentage and containers. Hopefully It’ll give you an idea on how some things work.
https://codepen.io/BurakAy/pen/RZxXey?editors=1000

1 Like
7

You can give this great tutorial on flexbox a view. It really helped me.

2 Likes
8

Wow, just wow, okay. I’m just getting started playing around with it to really understand why those changes work so well, but I just wanted to say thank you, it looks so much better now!

9

Thanks for the link! The whole channel is really helpful!

1 Like