What to do if my website is messed up on different devices?

Question

I have created a website using pure HTML and CSS, and in my opinion it looks great. Though when I open it on a device with a smaller or larger screen or even reduce the size of my webpage, all the elements (header, buttons, text, divs etc.) go to random positions and overlap. I searched it online and it said that we should not use px or percentage for width, height, or positions so I replaced them correctly with vw and vh, yet it is still messed up. Please help!

Thanks in advance!
-Nabo2212

Answer 1

1. Font sizes in % are relative to normal text. Use VW instead.

2. It would be helpful if I can see the code.

Answer 2

You can visit the page and inspect it for the code:
nabihah.zaheer.com
Though it will probably look messed up again...

Answer 3

you need to make it responsive using media-screen in css
I suggest you to write this in google: responsive html templates
then download few of them and study them

Answer 4

You should use percentages for margins and sizes not fixed values or pixels where possible.

Answer 5

Actually, all of my dimensions are already in % but it's still not working

Answer 6

Huh would be worth putting up a link so I can see what is happening. It may take a while for me to get back to you because I will have to look at it on my computer

Answer 7

Link:
nabihah.zaheer.com
Inspect the page for the code, and if you want to see the problem try decreasing browser size and it messes up. If you have a monitor greater or smaller than mine, it will also show messed up but on my PC it is perfect (only in full screen)

Answer 8

you forgot this in head element:
<meta content="width=device-width, initial-scale=1" name="viewport">

and you used position: absolute on every element, but I dont see the purpose of that
that makes overlapping

Answer 9

Thank you for the header advice!!
I used position absolute to be able to place everything where I wanted it to be. For example the text on the homescreen has been giving the absolute position command followed by a command of where to place it for example
(top: 20%;
left: 50%;)

Correct me if I am wrong but isn't this necessary?

Answer 10

Oh and could you give me a hint how and where to put the line you have given for the header?

Answer 11

1.Thank you so much!
2. How do I know my 'HTML code'
3. Where do I place this code in my HTML
4. Do I have to specifically change anything in this except for screen resolution and html code?
5. Will I have to change anything in my HTML code for this? (e.g the units used like px, vw, vh, % etc. or the values like width: 300px; should change to become more or less etc.)

thanks!

Answer 12

Last but not least, can you send the code again because I didn't copy/save it and whenever you comment on one of my projects or discussions your message vanishes after like 30seconds...😅