How do you scale websites to other devices?

Hi,

I’m pretty much finished with my first project https://codepen.io/Modestas/pen/aBPQem but i noticed that when i view it on a device of a different size, everything is out of place. Is there an efficient way of scaling my code to work on all devices and screen sizes?

Thanks!

The term for what you are talking about is responsiveness.
It’s a very difficult problem depending on size of your app and the level of responsiveness that you aim for. But here are few tools that will assist you.

  1. Media query
  2. Use relative sizing units. e.g) em, rem, %, vh, vw, and etc… I only use px for very delicate positioning.
  3. Use Javascript to detect user environment and respond accordingly.

I also find mobile-first approach helpful.
Note that these techniques are quite old, but they are quite helpful. (Besides, I haven’t really updated myself on this area, so that’s pretty much all I’ve got.)

You have to use Bootstrap!It;s very easy to use it ;)You will learn it during the course!
This is the official website of it:

Hi Modesta,

I see that you are using lots of CSS, it is a good thing that you are practicing your CSS skills.
An efficient way to make you code working on all devices is to use the bootstrap library like you did on the challenges.

You can save a lot of time making your project responsive without writing media queries.

After you include the bootstrap library in your code pen project just use the classes provided by bootstrap in your HTML.

If you don’t know how to add bootstrap to your codepen project check this quick video: