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
Related
This has me stumped. This works fine in browsers (tested Chrome, Firefox, and Safari), but doesn't work in Chrome emulator, Chrome mobile, or Firefox mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta title="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 50%;
float: left;
}
#media screen and (max-width: 500px) {
div {
width: 100%;
}
}
</style>
</head>
<body>
<div>Left</div>
<div>Right</div>
</body>
</html>
My original problem was more complex, but even boiling it down to the simplest form it's not working. Tried the above with different combinations such as display: inline-block; instead of float: left;, different viewport meta tags, adding only screen to the media query, other tags than plain divs, etc.
My original problem surfaced when doing work with Web Components + ShadowDOM, but it doesn't seem to be related to those. Made sure to bust all my caches while testing.
Am I going nuts?
Oh wow I'm dumb. Had a typo in the meta tag. Should be name instead of title:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I created my website and want to make it mobile friendly.
So I created a media query and started working with it. Checking while scaling my browser window.
If I check the same page on a phone it doesn't change the layout.
I can't see what I'm missing.
Here is what I have:
HTML:
<div>
<p>
<h2>Title</h2>
</p>
</div>
CSS:
#media (max-width: 768px) {
h2{
font-size:2.5vw !important;
}
}
h2{
font-size:1.5vw;
}
Hope I missed just a small thing :-)
M.
Sounds like you need to tell the device to use its actual pixel width:
<meta name="viewport" content="width=device-width, initial-scale=1">
Some devices will render pages assuming they are not optimized for mobile. Put that meta tag in your <head> tags and let us know if that fixes it. More info here.
Try adding this into your code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Try this
#media only screen and (max-width:768px) { ... }
OR
#media only screen and (min-width:320px) { ... }
I'm trying to condense my external css media query style sheet and my main css stylesheet.
When I link to the external style sheet, the media query works properly.. but after I tried to add the code to my main css stylesheet, it no longer works.
I've been looking at a tutorial and downloaded some files, but I'm still stumped.
I linked to my external media query css sheet by linking it like this:
<link rel='stylesheet' media='screen and (min-width: 700px) and (max-width: 2500px)' href='css/r_700.css' />
This worked fine.
Here is the header I have for my page at the moment:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Tester Page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel='stylesheet' type='text/css' href='css/style.css' media='all' />
<!--
<link rel='stylesheet' media='screen and (min-width: 700px) and (max-width: 2500px)' href='css/r_700.css' />
-->
</head>
Here is the code in the external r_700 style sheet:
body {
background-color:#00F;
background-image:none;
padding:0;
margin:0;
}
Here is the code in the main style.css sheet (that I can't get to work):
#media all and (min-width: 700px) {
body {
background-color:#00F;
background-image:none;
padding:0;
margin:0;
}
}
The #media is the very last bit of lines in the main stylesheet, so I know nothing is writing over it.
I know it has to be something simple, like screwed up syntax or something like that. I feel really dumb that I can't get this silly thing to work.
Does anyone mind helping me out? Thanks.
I think it is because the code that you are replacing in your media query is the exact same as the code in your default CSS:
Default:
body {
background-color:#00F;
background-image:none;
padding:0;
margin:0;
}
vs:
#media all and (min-width: 700px) {
body {
background-color:#00F;
background-image:none;
padding:0;
margin:0;
}
}
You're not changing anything, so the page looks the same...
I am new to CSS media queries, and I was first trying to get pdf/mp3/mp4 buttons to get centered on this page whenever a mobile device is using it (http://www.mannachurch.org/portfolio-type/recycled-junk/). Keep in mind for that I am using a highly modified wordpress theme.
So I tried experimenting to isolate this issue. However, I don't seem to have any control over using media queries and I can't even perform anything even on this simple HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
body{background-color: blue;}
#media only screen and (min-device-width : 599px) and (max-device-width : 600px) {
body {background-color:black;
}
}
</style>
</head>
<body>
<p>This is an experiment<p/>
</body>
</html>
What am I doing wrong?
Your media query only leaves a one pixel range to work with. Between 599 and 600. You would want something like:
#media only screen and (max-device-width : 600px) {
body {background-color:black;
}
}
Add viewPort Meta tag in your tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here is reference : http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
Can you fix you width properties as you have a 1px differencial
min-device-width : 599px
max-device-width : 600px
I found a solution that worked. This question was sparked from a theme I am trying to customize in wordpress. The editor in wordpress is REALLY wonky. At least now I know I'm doing the CSS media queries right. This is what worked:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the document</title>
<style type="text/css">
/*-- EUREKA!!! IT works! */
body{background-color: blue;}
#media all and (min-width: 250px) and (max-width: 400px) {
body{
background-color:black;
}
}
#media all and (min-width: 640px) and (max-width: 760px) {
body{
background-color:black;
}
}
#media all and (min-width: 768px) and (max-width: 1024px) {
body{
background-color:black;
}
}
</style>
</head>
I'm doing some testing on IE 11 and it's using the CSS for mobile devices and not the "full screen" css. Chrome, Firefox, Opera and Safari all use the correct "full screen" CSS, but IE 11 is grabbing the mobile/media css. I've cleared the cache multiple times and looked at the CSS sheet that it's grabbing, and it is using the most up-to-date version.
In the head I have
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/css/default.css">
</head>
In the CSS file, I have the following after all of the "full sized" css
//"full sized" css
....
#media only screen and (max-width: 479px) {
//mobile CSS
}
IE 11 on my laptop is using the media CSS and I can't figure out why. I know it's using the media only section and not just formatting incorrectly, because when I delete the media only section from the CSS, it then displays as expected.
can you try this:
#media all and (max-width: 479px) {
//mobile CSS
}
with all you are targeting all devices, and not only the desktop version you are now targeting with screen.
For mobile only, you would do this:
#media (max-width: 600px) {
//mobile CSS
}