https://codepen.io/bankslado/full/KjZWoa

https://codepen.io/bankslado/full/KjZWoa
0

Can anyone help me with making this project responsive?
:slight_smile: Thank you in advance.

https://codepen.io/bankslado/full/KjZWoa

There are a few things I might consider.

First, you’re using fixed-unit dimensions everywhere. Every measurement is given in pixels. And that’s fine, but totally non-responsive. A pixel is a pixel is a pixel. Shrink the browser width, and a pixel remains a fixed size. A start to responsive design might be to look into “relative measurements.”

I imagine you’ve already discovered that, as a designer/developer, you will spend a LOT of time examining the MDN documentation. This time is no exception: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units

Specifically, scroll down to the discussion on Absolute units and relative units. Absolute units are considered non-responsive. They’re pretty fixed. using px, for example, is not considered accessible, as (for example) a visually-impaired person’s browser won’t scale them up as they might with a font sized in em or vw units.

Another trick to becoming responsive would be to handle media queries. Search on the MDN site for Media Queries, if you’re not comfortable with them yet. Them suckers are useful!

1 Like

Thank you @snowmonkey, this article really helped me a lot.

1 Like