Html + Css good response on computer (even in minimized mode) but bad on mobile

Question

I used a ready-made template for my project.

I don't know much about html and Css, I just deleted and customized some of the code by trial and error.

To test mobile response, I minimized my web browser on the PC. Everything was fine... Now I encountered this when I tested it on my phone.

This is the mobile browser - very bad

How is this possible? Everything is bad - see footer! It shows footer like PC not mobile - why? The best and fastest way to solve this problem in the whole project?

Answer 1

Bit reluctant to post this as an answer as it is fairly basic, but I do appreciate that there may be people who don't recognise its importance.

Make sure this line is in your head element.

<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

See https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag for more detail.

And a warning - if you use other people's code remove stuff only if you understand it - and look up things you are not sure about on MDN for example.

Answer 2

add this to the head element of your html

<meta name="viewport" content="width=device-width, initial-scale=1" />