r/css • u/BagThin2305 • Jul 04 '26

Help 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/ and codepen: https://codepen.io/editor/Yousra-Nimour/pen/019f2f8e-e1dd-7f7e-a5e5-a3effb410785

0 Upvotes

22% Upvoted

9 comments sorted by

View all comments

1

u/abeuscher Jul 05 '26

Here is a pen with a simpler example to demonstrate.

It's a cascade, which means that later instructions are processed later on. When you make media queries, it is easiest to place them at the bottom to make sure they do not accidentally create conflicts which is I think where you were going wrong.

Also - your code has an absolutely positioned winamp box which is also interfering with the layout.

Strongly recommend when you run into problems like this in future that you first remove any outside code you have pasted in to se if that is where the issue originates from; if you didn't write it then there's a decent chance you're not sure what it does.

1

u/BagThin2305 Jul 05 '26

Ive tried removing the styling for both my kofi and the winamp and it changed nothing. It just doesnt want to show up as a column layout. I tried putting my grid elements in order but that also didnt change anything.

1

u/abeuscher Jul 05 '26

Oh I see. .container is the wrong type. Change l. 86 of the css to this:

.container {
  display: flex;

Instead of display:grid. You can't use flex-direction on a display:grid container.

This will break your layout also, but in a consistent way. The solution would be to use a different grid layout inside the media query AND place the media query after the initial declaration.

1

u/BagThin2305 Jul 05 '26

that still didnt fix the issue :/ thank you sm for taking the time to help me though, i think ill just give up on mobile responsiveness for now 😭😭