#import media queries css issue - html

I am preparing my first responsive web layout.
I have prepared two css one is for normal mode and other one is for mobile mode.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"
href="css/mobile.css" />
</head>
Desktop mode (CSS)
#face
{
background-image: url(../images/Face.png);
background-repeat: no-repeat;
height:155px;
}
mobile mode (CSS)
#face
{
display:none;
}
But when decrease my browser window to mobile mode still #face this is displaying.
Kindly suggest me what I am doing wrong
Thanks in advance.
M

max-device-width measures the width of the screen, not the width of the browser.
Change that to max-width.

#media (max-width: 600px) {
#face
{
display:none;
}
}
try this
Or you can use this
<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css" />

Related

Media Queries in CSS file not working on Safari

My responsive design is working in every browser but Safari. Here is a screenshot of the code in the main file and in the CSS file. Is there something I have missed? Why isn't this working?
I should add that the media query works perfectly in the HTML file in a tag but will not work in a seperate CSS file.
Thank you in advance
/* Nav Bar Dynamic */
#media screen and (max-width: 1999px) {
/* code here */
}
#media screen and (min-width: 2000px) {
/* code here */
}
/* End NavBar dynamic */
<head>
<link rel="stylesheet" href="/Styles/newStyle.css"/>
<link rel="icon" href="/Images/manLogo.png">
<script src="/NewSite/JavaScript/exploreScript.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

How to fix media queries in css?

I need to create desktop and mobile versions of the site. I decided to use media queries in CSS. But when I coded them, I found out that they aren't working and I don't know how to fix them. To fix this issue I went to Youtube where found this example, but I implemented that I found that the media query doesn't work. Then I went to stack and found a similar problem. In that case, it was fixed by adding a meta tag in the head. I did that, but it didn't help me. It wasn't work in chrome and Mozilla.
body{
color:red;
}
#media screen and (max-width: 600){
body{
color: blue;
}
}
<!DOCTYPE html>
<html>
<head>
<title>The car dealer site</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>Title</h1><br>
<h2>Subtitle</h2>
</body>
</html>
You need to specify the units for your max-width property. Change the line
#media screen and (max-width: 600){
to
#media screen and (max-width: 600px){
And try it again

Simplified: White space on mobile when defining div min-width

Problem: White space appears at bottom of page on mobile Chrome.
I gutted everything to isolate the problem. There's now a single div. Page takes up full viewport just fine, until I define a min-width for the div.
I tried a css reset. Did not solve problem.
Am I just not properly using min-width?
Edit (link to page): http://www.hauntedbuckscounty.com/Tools/Environment.php
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Haunted Bucks County (HBC)</title>
<!-- jQuery -->
<script type="text/javascript" src="http://www.hauntedbuckscounty.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="http://www.hauntedbuckscounty.com/style_theme.html">
<link rel="stylesheet" href="http://www.hauntedbuckscounty.com/CSS/reset_main.css">
<link rel="stylesheet" href="http://www.hauntedbuckscounty.com/CSS/reset_normalize.css">
<link rel="stylesheet" media="(min-width: 1200px)" href="Carousel_1200px.css">
<link rel="stylesheet" media="(max-width: 1199px) and (min-width: 0px)" href="Carousel_768px.css"> <!--MIN NORMALLY 768 BUT TEMPORARILY SET TO ZERO TO ALLOW LATER DEV OF MOBILE VERSION-->
<style>
* { border: 0px solid red; }
html {border:0px blue solid;}
footer {
margin-top: 0px;
padding-top: 0px;
}
</style>
</head>
<body style="background-image:linear-gradient(#0E0E0F 70%, #1B1B1C);border:0px white solid;">
<div id="Nav" style="position:relative;height:50px; width:100%;min-width:650px;
background-color:blue;">
</div>
</body>
</html>
If you want to create a responsive layout, for mobile devices, you should never use static min-width values, as there are many devices with different screen resolutions.
To solve your issue just don't use the min-width property, rather just use width: 100% for the media query that you prefer, i.e.
#media screen only and (max-width: 767px) {
#Nav { width: 100%; }
}
If you continue to use min-width for responsive layouts, you will always end up with a ugly scrollbar or unwanted widths of elements inside your website.

Bootstrap 2.3.2 responsive layout doesn't work on IE8

I'll try to be more specific. I have this stylesheets on my main control
<link href="/css/Fonts.css" rel="stylesheet" />
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="/css/mysite.css" rel="stylesheet" />
<link href="/css/responsive.css" rel="stylesheet" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/explorer.css" />
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
my container width for large screen comes from responsive.css where I have this code
#media handheld, only screen and (min-width: 1440px){
{.container:1400px;}
}
when I run my code in crome it is 1400px for large screen ignoring bootstrap container width this
#media (min-width: 1200px){
.container {
width: 1170px;}
}
and this
.container{
width: 940px;
}
but when I run my code in IE8 it picks up bootstrap container width
.container{
width: 940px;
}
and ignors
#media handheld, only screen and (min-width: 1440px){
{.container:1400px;}
}
The problem is I want explorer 8 not to ignore my code for large sreen(1400px). I know I cannot add it in my "explorer.css" as a media query inside a media query like this. i know it won't work.
/* IE8 */
#media \0screen
{
#media handheld, only screen and (min-width: 1440px){
.container:1400px;}
}
So I decided to add !important on this
#media handheld, only screen and (min-width: 1440px){
{.container:1400px !important;}
}
so it began to be of the size I want for the large screen but now it resizes very slowly(due to css3-mediaqueries.js which works slowly) and is not showing up mobile design .So now my question is whether
css3-mediaqueries.js supports mobile? Thanks for trying to help.

Targeting Different Screen Widths with Multiple CSS files

Here are links to my CSS files:
<link rel="stylesheet" href="css/mobile_css_320.css" media="screen and (min-device-width: 0px) and (max-device-width: 320px)" />
<link rel="stylesheet" href="css/mobile_css_480.css" media="screen and (min-device-width: 321px) and (max-device-width: 480px)" />
<link rel="stylesheet" href="css/mobile_css_640.css" media="screen and (min-device-width: 481px) and (max-device-width: 640px)" />
<link rel="stylesheet" href="css/mobile_css_720.css" media="screen and (min-device-width: 641px) and (max-device-width: 720px)" />
<link rel="stylesheet" href="css/styles.css" media="screen, projection" />
Here is my link in styles.css (for Web Browsers on PC's)
#form_wrapper {
width: 320px;
margin: 0 auto;
}
In all other CSS files (targeting Mobile Devices), I do this:
#form_wrapper {
width: 92%;
margin: 0 auto;
}
However, in all Mobile devices, it goes straight to the last CSS file, styles.css and I get that div 320px on all devices no matter what.
I have only tested on Google's Chrome for Android on mobile devices as well as the stock Android webkit browser (for Android 4.0+). Is my code handling wrong?
Its probably loading all of them that are relevant, and since the last one is the most generic (mobile devices will match the media screen), it overwrites all styles defined in the previous stylesheets. CSS is a last-in wins in cases of a tie in specificity.
Try putting your generic stylesheet first, or combining them using media queries directly in the stylesheet itself.
CSS Specificity states that if two rules are the same e.g.
.text { color: blue; }
.text { color: red; }
Then the last one always prevails (in this case anything with a class of text would have red text)
So as your last stylesheet has no media query attached to it, it is always loading, and always overiding any styles you put in the mobile stylesheets before it.
To counteract this you could:
1) Put the desktop stylesheet first
2) Use a min-width media query on the last stylesheet, e.g.
<link rel="stylesheet" href="css/styles.css" media="media="screen and (min-device-width: 720px)" />