I can't get my CSS media queries to work. I've worked with them in the past and they worked for me, but on this particular site, they don't function. I added <meta name="viewport" content="width=device-width, initial-scale=1"> but it still doesn't work. this is my HTML and this is my only CSS media query #media and screen ( max-width: 700px ) {.header-image {display: none;}} Do you see a mistake somewhere? I'm pretty sure it will be something totally minor, but I spent hours trying to make it work and haven't been successful so far. Thanks a lot:)
The syntax of your code is wrong
This is the valid media query
#media screen and ( max-width: 700px ) { ... }
Related
So the situation is a little bit weird because there are alot of questions already been asked on media queries but unfornulately I couldn't find my way in most of them. Actually I am working on a simple website and I wrote a media which looks like this.And notice that sass also notifies me that no grid-area have been specified for the grid-template-areas present in the media whereas I specified it out of the media on top.And just for a precision my media is at the bottom of my code.
#media (max-width: 769px) {
.top-container {
grid-template-areas:
"showcase showcase"
"top-box-a top-box-b";
background-color: green;
}
}
but it doesn't work,even with the meta Tag and the viewport specified.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Thanks...
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to get a media query to work on mobile. I have used the proper # media queries along with min/max width sizes. It works on my computer but not on my mobile device. Also note, I have added the proper meta tag in the head.
<meta name="viewport" content="width=device-width,initial-scale=1">
#media only screen and (max-width: 480px){
#top-table{
background-color: green;
}
}
I am using a Samsung GalaxyS5 though I would like it to work on multiple devices. I am using Chrome. When I change the size of my browser it works fine, but on mobile there are no changes.
It's hard to say for sure without having any more information but a few things I can think of off the top of my head would be to check that you have properly included it below any css that you have imported, for example it would need be here:
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Another point to consider would be making sure you've linked the css, that the media queries are included in, properly. I know that sounds dumb but just make sure to double check! Finally, off the top of my head the last thing I can thing of is that you've used the media queries correctly. It is best practice to include them in a separate file, as per the example above, and make sure you know what order they go in. If you were trying to do a mobile-first platform then you would need to include them via min-width with the lowest screen resolution at the top. Or vice versa if you're doing a desktop first application. If you've double check all of this then I can only think to simply save everything and restart the program, sounds silly but I've had a number of times in several different IDE's where restarting seemingly fixed a few problems. Best wishes!
EDIT
Try formatting it like this (obviously with your own code) and see if it fixes some problems!
#media screen and (min-width: 500px) {
/*****BODY*****/
#disp2 {
display: inline;
}
#wrapper img {
width: 45%;
float: left;
margin: 2.5%;
}
#wrapper .cycle-slideshow img {
width: 95%;
float: left;
}
.secondary-content2 {
max-width: 450px;
margin: 0 auto;
padding: 2.5%;
}
/**************/
}
It worked before but all of a sudden it stopped working :(
#media only screen and (max-width: 768px) {
form,
button,
input {
width: 80vw !important;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
I have html, css and js code included in the link below:
DEMO: CodePen
The problem is an invisible special character inserted into your code.
It's making the declaration invalid, which calls CSS error-handling into play, and the rule is ignored.
If you copy and paste the code into Notepad, you'll see it.
In computer science we call this a focused, non-repeating phantasm, or class-5 free roaming vapor... real nasty one, too! :-)
The simple solution is to just delete that media query and re-type it.
I have added some css media queries but it doesn't seem to make any change, I mean I have added this code
#media screen and (min-width:10px) and (max-width:640px) {
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
}
but the left and right sidebars are still visible i have also tried changing the range of min-width and max-width it still doesn't make any difference, am i missing something here ? do i have to add something more than this in my css to make it work ?
below given is my default css for both classes
.leftSideBar{display:block !important;}
.rightSideBar{display:block !important;}
My advice would be to test the code in a real mobile phone not with a browser if that's what you are doing cause browsers behave differently
Another important thing you must do is add meta view port tag without that it won't work like the one given below
<meta name="viewport" content="width=device-width, initial-scale=1" />
Remove !important from your default css use css specificity instead if its really necessary so your default css should be
.leftSideBar{display:block;}
.rightSideBar{display:block;}
if even that doesn't work you have to show us your entire css or html to identify the problem
Everything looks fine in your code.
Try with this meta in your html :
<meta name="viewport" content="width=device-width, initial-scale=1" />
Also, if I can give you a little advice, try the mobile first way. It looks like this :
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
#media screen and (min-width:640px) {
/*design for screen-width >= 640px */
}
This gives a priority on mobile devices so computers will be set as the exception in order to have less code executed on mobile devices which are quite less powerful than a computer ;)
here is a little / great tutorial on mobile first approach :
http://www.html5rocks.com/en/mobile/responsivedesign/
Good luck and give your html and full css if it's still not working.
The min-width and !important are probably useless. The query is fine, but it may be shortned to just:
#media screen and (max-width:640px) {
.leftSideBar, .rightSideBar {display:none}
}
Should be working either way. Are you sure the html is fine? You may want to show that here as well.
This code is the best for mobile friendly responsive web:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Okay,
I know there are a lot of questions out there on CSS media queries and meta viewport tags for responsive websites. I've read through a ton of them, but I'm not having any luck.
I have a website, a portfolio website, that I had responsive. One day, the responsive stuff just stopped working. I started looking into it and just have had no luck. I've made sure to use the meta viewport tag, but that's just not doing anything. Here's my <meta> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
and one section of the responsive CSS file:
#media screen and(max-width: 800px){
/*body:before{ color: #fff; content: 'Max-Width: 800px'; }*/
.social-media a,
.social-media iframe{
margin-bottom: 10px;
}
.level2{
height: 140px;
}
}
I've also tried with and without this bit of code:
#-o-viewport,
#-ms-viewport{
width: device-width;
}
The frustrating thing is that at work I just finished a responsive site and had no issues. I figure maybe another set of eyes may be able to catch something that I haven't been able to.
You can see the website at pjlamb12.github.io, and it will look fine in a desktop but not like I want it to on any mobile devices.
Thanks!
P.S.
I don't know if this matters, but the site is on GitHub pages, and I'm using Jekyll to run the site.
EDIT
The rest of the code can also be seen in GitHub here https://github.com/pjlamb12/pjlamb12.github.com
Okay, I figured out the problem. Really stupid, small problem. It was in my media queries line; here's what I had:
#media screen and(max-width: 800px){
/* styles */
}
But what you have to have is:
#media screen and (max-width: 800px){
/* styles */
}
Did you notice the difference? It took me a few minutes, but there HAS to be a space between the and and the ( on that first line.
Hopefully if anyone else has this issue, they'll see this and try it first thing.
Thanks!