CODEWITHSUNDEEP
htmlcssmobile
Mayank Gupta
Mayank Gupta

Reputation: 93

Mobile Browsers Not Detecting Mobile CSS File

I have two different css files, one for the desktop site and another to make site responsive for mobile and tablets. My problem is that for some reason, mobile browsers are not detecting the mobile css file to adjust the site according to the screen. I am new to all these things and still learning and struggling. Could somebody help? Below is the head section of the trial page that I created to test the mobile responsive.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<title>Bandipur Travel| Travel In Bandipur| Bandipur National Park |Easy Destination</title>
<meta name="description" content="Tours and travel in Bandipur. Bandipur National Park Travel Guide, Provides info on Travel in Bandipur. Travel Tips and attractions in Bandipur National Park."/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="motoland/style.css" media="screen" />
<link rel="shortcut icon" href="blog/skins/motoland/favicon.ico" />
<link rel="icon" href="blog/skins/motoland/favicon.ico" />
<SCRIPT type="text/javascript">//btm-pan start js//
//btm-pan end js//</SCRIPT>
<style type="text/css">
<!--
.style1 {font-size: 10}
.style2 {font-size: 18px}
.style3 {color: #FFFFFF}
.style4 {font-size: 20px}
#Layer1 {
position:absolute;
left:297px;
top:1479px;
width:128px;
height:145px;
z-index:1;
}
.style21 {font-size: 14px}
.style22 {font-weight: bold}
.style23 {font-size: 12px}
.style10 {  font-size: 16px;
font-weight: bold;
}
.style7 {font-size: 18px;
font-weight: bold;
}
-->
</style>
<link href="motoland/p7csspbm1_responsive.css" rel="stylesheet" type="text/css" media="all" />
</head>

Upvotes: 0

Views: 64

Answers (2)

Charan Kumar
Charan Kumar

Reputation: 573

Please recheck your p7csspbm1_responsive.css file where you've your media queries. I don't see elements that you are trying to control correct html elements. I mean to say that you have given width auto style to an elements with class "content-wrapper", which is not in your DOM tree.

Also, make sure you have correct meta

Upvotes: 0

Saika
Saika

Reputation: 396

Use This Code: 

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

Upvotes: 1

Related Questions