How to do a responsive page?

Question

Hii. I'm trying to do a CSS Art for a Front-End challenge that was organized by DEV Community ( if you're interested, here is the link for the event: https://dev.to/challenges/frontend-2025-10-15 ). My idea is to do shelves with different potions. For now, I'm doing and draft about the potions, and I'm struggling with doing ''responsive''. Sorry if my code is messy.
Btw, if you have any suggestions about my code or have errors that I need to improve would be helpful.
https://www.sololearn.com/compiler-playground/WV329mBwFty5/?ref=app

Answer 1

I didn't see flexbox. maybe you should read about that

Answer 2

flexbox or grid.

i removed some a mistakenly applied background color on the bottle css, changed position:absolute to position:relative for the bottle and container divs, and used display flex for the container class. I resized the bottle div width to more closely fit the actual bottles for less wasted space between bottles. and did some css refactoring and simplification.

i would have also factored out the background-color to separate classes for easier color changing, so that the liquids can be different colors. but the use of :before and :after pseudo elements limit the usefulness of such a modification, so i ended up abandoning the idea...

also did some experiment on node cloning and children shuffling in js to fill up the page.

https://sololearn.com/compiler-playground/Wr8dbOdN2gR8/?ref=app

Answer 3

use @media it can give directiv on how the element should be at certain width/heigth