I have a css media query but it seems to be mixed up and I'm not sure why. It's making the desktop version look like what I want the mobile version to be, and the mobile version looks like what I want the desktop to be. Here is the css page in question:
#media (min-width: 500px;) {
body{background-image:url(ollivanderbackground.jpg);color:#FFFF66;}
.navigation{color:#FFFF99; border:dotted medium #FFFF99; width: 35%;}
a:hover{color: #FFFFCC;}
a:visited{color: #FFFF1A;}
}
#media (max-width: 499px;) {
.navigation{width: 100%;}
.bio{display: none;}
}
in the HTML for the page I have this within the head tags:
<'meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"'>
What exactly am I doing wrong?
Change:
#media (min-width: 500px;) { ... }
#media (max-width: 499px;) { ... }
To:
#media (min-width: 500px) { ... }
#media (max-width: 499px) { ... }
you can try use '#media screen'
#media screen and (min-width:200px) and (max-width:1000px)
Removing the semi-colon should have fixed the issue
#media (min-width: 500px) { ... }
#media (max-width: 499px) { ... }
Since that is not working, try adding screen
#media screen and (min-width: 500px) { ... }
#media screen and (max-width: 499px) { ... }
If that does not resolve your issue, then add a snippet with your question
I figured it out. It turns out My browser history was really clogged and was loading an older version of the site while trying to mix it with the new CSS and things got really mixed up and weird.
Clearing my browser data fixed this problem. Thanks to all for your helpful tries!
If I understand your question correctly, and I am going out on a limb here without seeing the rest of your code, your responsive layouts are being messed up possibly due to a bad or missing declaration of viewport.
Check, replace, or add this in your head. You currently have single quotes around it
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Read more about it here
Also, build your application with a mobile-first approach
media max = 480 --> do this until
media max = 768 --> if changes required change or continue to
media max = 989 --> if changes required change or continue to
media max = 1200
Related
I am very confuse with the media query because when ever i apply media query it does not work properly is there ant sequence to write it in CSS file?
#media max-width(767px) {body{background:red;} }
#media max-width(992px) {body{background:blue;} }
#media max-width(1200px) {body{background:#fff;} }
Is there any proper sequence to write it according to the screen size?Is the any difference if i write it like this?
#media max-width(1200px) {body{background:#fff;} }
#media max-width(992px) {body{background:blue;} }
#media max-width(767px) {body{background:red;} }
You have to write your media as below.
Learn here:https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
See here:https://jsfiddle.net/r60xs5j7/3/
#media only screen and (max-width: 767px) {body{background:#fff;} }
#media only screen and (max-width: 992px) {body{background:blue;} }
#media only screen and (min-width: 1200px) {body{background:red;} }
and whenever you put them in css they have to work(Except for a case of override that you will need use !important)
See here(end of css):https://jsfiddle.net/r60xs5j7/5/
Note!
You need this meta in head tag to make media query works:
<meta name="viewport" content="width=device-width, initial-scale=1">
First of all I am really sorry for the title of the question as I wasn't able to figure out on how to describe my problem, so this is why I used such title.
Right now I am starter in using media queries and I am using them on my practice project for its responsiveness and I want to apply an orientation lock on that project. Like, the project is compatible on the mobile portrait view but it is not available on the mobile landscape view.
I have applied the following code for the orientation lock, but the problem is that when the browser window is resized and when it matches the screen resolution, the lock applies. I don't want the lock to get applied on the desktop view.
There is a way which is by using device-width but that has been deprecated by mozilla. So, is there any way to resolve this issue with only min-width or something else?
Please let me know if you are unable to understand.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<style>
#div-2{
display:none;
}
#media screen and(min-width:320px) and (orientation:landscape){
#div-1{
display:none;
}
#div-2{
display:block;
}
}
</style>
</head>
<body>
<div id="div-1"><p>Orientation lock not applied.</p></div>
<div id="div-2"><p>Orientation lock applied.</p></div>
</body>
Ok i understand now replace the code hope this is useful for you:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<style>
#media screen and (min-width: 320px) and (orientation:landscape) {
#div-1 {
display: block;
}
#div-2 {
display: none;
}
}
#media screen and (min-width: 961px) and (orientation:landscape) {
#div-2 {
display: none;
}
#div-1{
display:block;
}
}
</style>
</head>
<body>
<div id="div-1">
<p>Orientation lock not applied.</p>
</div>
<div id="div-2>
<p>Orientation lock applied.</p>
</div>
</body>
</html>
I think there is not any strange thing.
You write this media query:
#media only screen and (min-width:320px) and (orientation:landscape) {
#div-1 {
display: none;
}
#div-2 {
display: block;
}
}
That contains desktop. So in desktop div-1 is hide and div-2 is visible.
If you want this media query works only for mobile you must use max-width
that filters screens that are larger than what you want(Desktop). It means that styles are not for desktop.
This media query works on size of browser and if you want to filter some Devices size independent of browser width you must use this media query:
#media only screen and (max-device-width: 320px)
I am experiencing very strange behavior with Chrome. It is not picking up media queries at certain sizes when it is in the mobile debugging view.
For example the following works in mobile view:
#media screen and (max-width: 980px) {
#cliff {
background-color: red; }
}
but this doesn't work
#media screen and (max-width: 979px) {
#cliff {
background-color: red; }
}
You will see the difference is only one pixel. Then if I come out of the mobile debugging view and change the screen size it works. Can anyone advise, or know of any reason that this is happening?
Do you have this in the header?
<meta name="viewport" content="width=device-width, initial-scale=1">
Also, maybe changing the format will help. This works for me:
#media (max-width:980px){
//Styles
}
I am in despair. I am trying to make a website and make it mobile-friendly and responsive, however, I cannot seem to get any kind of media query to work at all! All my sizes, width and heights are in "%/em" and my font-sizes are in "vw/em". The biggest problem I get is that, as the screen shrinks, so does my text, to the point where it simply becomes eye-straining to read! I don't see relevant to send any code but if need be, I shall send some of my code (my website is still offline and I cannot put it out there if this problem isn't fixed).
Here's what I have tried:
I have tried putting this in my tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
No success when I try media query in a tab or in a separate css stylesheet.
I have tried removing it aswell.
I have tried these media queries for my font-sizes:
#media (max-width: 400px) {
body { font-size: 60%;}
}
#media only screen and (max-device-width: 800px) {
body {
font-size: 80%;
background-color: blue;
}
}
#media (max-width: 1100px) {
body { font-size: 120%;}
}
I have also tried other media queries but absolutely NOTHING changes at all! Am I doing something wrong? Probably but what?!! This is leading to so many problems! I cannot change my header according to different screen sizes, I cannot change my display, my header links are a mess, etc.
Also, please note that I am a beginner and I do not use any javascript, bootstrap or whatever.
Thank you in advance for your help!
Your queries are a little weird. Perhaps with some logical constrains you can achieve what you are looking for? This is what I mean:
#media (max-width: 400px) {
body{
background-color: yellow;
}
}
#media (min-width: 401px) and (max-width: 800px){
body {
background-color: blue;
}
}
#media (min-width: 801px) and (max-width: 1100px) {
body {
background-color: purple;
}
}
#media (min-width: 1101px){
body{
background-color: orange;
}
}
In my humble opinion, setting the intervals using both min-width and max-width help me visualize what's going on better. This pen shows the colors changing whenever you change the width. It doesn't do much good, but it's something to get started with media queries.
EDIT:
Pen contains transitions between colors because cool
Usually, it's better to use media queries based on minimum screen width. Here is an working example with the code you posted:
Codepen: http://codepen.io/anon/pen/eNJXXp
#media (max-width: 400px) {
p { font-size: 60%;}
}
#media (min-width: 400px) {
p {
font-size: 80%;
background-color: blue;
}
}
#media (min-width: 800px) {
p { font-size: 120%;}
}
I have a website that I need to have working on mobile devices currently it displays like the image below.
So far I have had the following ideas:
Copy the 680 lines of CSS again within the same document in between #media only screen tags.
Copy the same code into a mobile.css stylesheet and start again
"2" is my least favourite option but the most likely I am just wanting to know what your options would be?
iPhone View:
Put this in the head of your HTML
<meta name='viewport' content='width=device-width, initial-scale=1 />
It's going to take a little work but is worth it. You have to take the CSS that is too big on mobile and put them in specific media queries based on size. Let's say you want your titles to change from 80px to 40px when the screen size is less than 600px:
#media screen and (max-width: 1000px) {
.mytitle {
font-size: 80px;
}
}
#media screen and (max-width: 600px) {
.mytitle {
font-size: 40px;
}
}