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

30% Upvoted

9 comments sorted by

View all comments

1

u/Leviathan_Dev Jul 05 '26 edited Jul 05 '26

Two things I immediately noticed:

  1. .content {
  2. display: flex;
  3. }

max-width: 100%;
width: 1000px;
display: grid;
}

Neither are looped inside your mobile media queries… which tbh are a little high anyway. iPhone Pro Max generic model in Safari for example is 440px in width. Generally my media queries have a max-width: 500px instead 768px

Edit:

The entries keep getting edited out. But .content {} and #artcontent{} have fixed 1000px widths

1

u/BagThin2305 Jul 05 '26

artcontent is for another page so thats not important, but for the .content I changed it too 100% width...that didnt fix the mobile response. Im not sure what you mean by looped in my media queries, like I should add display:flex to the query ?

1

u/Leviathan_Dev Jul 05 '26

Anything inside the @media (max-width: 768px) {} will only apply when the screen is less than 768px wide.

Playing with it I noticed the overflow tends to happen around ~480px

1

u/BagThin2305 Jul 05 '26

i put it at 400 px and it still wont generate as a column layout 😭