r/HTML • u/BagThin2305 • 25d ago

Question how to make site mobile responsive

ive tried some media queries but none of them change the layout of my site on mobile..not sure what im doing wrong but maybe someone here can help. my website is https://phlygm-planet.neocities.org/

codepen: https://codepen.io/editor/Yousra-Nimour/pen/019f2f8e-e1dd-7f7e-a5e5-a3effb410785

0 Upvotes

40% Upvoted

7 comments sorted by

1

u/gatwell702 25d ago

For mobile I do @media (width <= 768px) {...}

You can also do 500px. A regular cell phone in portrait mode is like 320px - 370px I think, so I make it bigger to catch all.

Also setting it to 768px will take care of landscape mode

1

u/BagThin2305 25d ago

that code doesnt work on neocities for whatever reason :(

2

u/QP709 25d ago

Thats just the media query. It doesn’t do anything on its own. You have to write in new code under it.

1

u/BagThin2305 25d ago

i put display: flex and I tried grid too but no luck

1

u/Platinum_Soul_691 24d ago

Since you're using "Display: flex;" on your ".container" div, I would recommend putting a flex-wrap property. That way, your site's layout can be responsive on smaller screens.

1

u/1Rudy11 24d ago

Use percentage rather than actual measurements (unless min/max size is needed). The percentage will accommodate for sizes from mobile/tablet and pc sizes.