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

92
January 19, 2022, at 12:30 PM

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.

The site



Answer 1

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>
Answer 2

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

Rent Charter Buses Company
READ ALSO
SOLVED - addClass only once onClick ReactJS

SOLVED - addClass only once onClick ReactJS

Hi I'm new to ReactJS so I'm importing some work of mine to my project and turning it into componentsI have a span acting as a button with keyframe animations, but when i load the page it gets animated

125
Can&#39;t understand code of getRefreshKey in Android paging3 codelab

Can't understand code of getRefreshKey in Android paging3 codelab

This is the code of getRefreshKey function of the paging3 codelab

156
Regular expression help - comma delimited string

Regular expression help - comma delimited string

I don't write many regular expressions so I'm going to need some help on the one

185
For the code given what will be stored in ArrayList? What are shallow pointers in Java?

For the code given what will be stored in ArrayList? What are shallow pointers in Java?

Suppose we have three Bear objects: momma, poppa, and babyWe create a "bears" ArrayList and add pointers to the three bears to the ArrayList

110