Why is the html view port meta tag breaking my CSS when I want to make my page responsive?-CodePudding

I am working on a small website for uni and have started out by designing the mobile site first. It looked exactly how I wanted it to look on a 320px mobile device. I started using media queries and realized that they weren't working because I forgot to input the view port meta tag in the head of the document. I put this in the head of the doc and it broke my whole design.

Has this ever happened to anyone before? Maybe there is an error somewhere in my code. I spent ages making this because I am new to coding. Thanks in advance to anyone who responds.

Below is a link to the site without the meta tag. The images are how it looks with it.

CodePudding user response：

I think you should add these line of the code inside of your html code

<head>
   <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>

CodePudding user response：

Try add this ,

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

More Details Geeks For Geeks