Search code examples
htmlcssasp.net-corebootstrap-4

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

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 enter image description here

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?

Solution

  • 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.