CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Zain Ul Abideen
Zain Ul Abideen

Reputation: 459

Chrome Developer Tool is not showing responsiveness

I am having issues while checking responsiveness of my website on chrome developer tool. When I resize my chrome window, It shows responsivness

In the following image chrome window width is 768px

resize window image

But when I use Toggle Device Toolbar in chrome it does not show responsiveness as in the following image. The width is 768px.

devtool

My index.html file is as follows

<!DOCTYPE html>
<html>
<head>
    <title>Personal Site</title>
    <link rel="stylesheet" type="text/css" href="./styles/style.css">
    <link rel="stylesheet" type="text/css" href="./styles/tab.css">
    <link rel="stylesheet" type="text/css" href="./styles/mobile.css">
</head>
<body>
All the Code lies here
</body>
</html>

My CSS files are as follows

style.css

All the styles are here no media queries

tab.css

@media only screen and (max-width: 768px) and (min-width: 501px)
{
All the styles are here
}

mobile.css

@media only screen and (max-width: 500px)
{
All the styles are here
}

Upvotes: 0

Views: 1818

Answers (1)

mightyteja
mightyteja

Reputation: 913

You are missing the Viewport tag in your head,

Add this to your head tag

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

Please visit this Document for more information

Upvotes: 2

Related Questions