Responsive CSS Not Working - html

Here is my css, as a test:
*{margin:0;padding:0;outline:0;border:0;}
body{background:#686465;font-family:Arial,Verdana,sans-serif;font-size:100%;}
#media screen and (max-device-width:320px){
body{background:red !important;}
}
#media screen and (max-device-width:800px){
body{background:organge !important;}
}
I have 2 android devices running using the SDK to test this. One is 3.2 inch HVGA Slider 320x480, and the first rule picks up on this device and sets the body background to red. The second device is Nexus 7 800x1280, but this one ignores both of the media rules; however if i delete the first media rule then it picks it up. Why??

Have you put this link in your html file:-
<meta name="viewport" content="width=device-width, initial-scale=1.0;">
you can use-
#media only screen and (max-width:800px){ }
instead of-
#media screen and (max-device-width:800px){ }

Replace into this
*{margin:0;padding:0;outline:0;border:0;}
body{background:#686465;font-family:Arial,Verdana,sans-serif;font-size:100%;}
#media screen and (max-device-width:320px){
body{background:red !important;}
}
#media screen and (max-device-width:800px){
body{background:organge !important;}
}
this
*{margin:0;padding:0;outline:0;border:0;}
body{background:#fcfcfc;font-family:Arial,Verdana,sans-serif;font-size:100%;}
#media screen and (max-device-width:800px){
body{background:orange;}
}
#media screen and (max-device-width:320px){
body{background:red ;}
}
More about media query-1
Media query-2

Related

why i have to write my media query at the end of my css.Is there any sequence to write media query from larger to smaller screen size?

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">

Showing and Hiding elements with CSS is not working on Mobiles

I am working with this page http://lifecrypter.io/ and I am using CSS to hide and show elements according to device screen resolution.
Code here:
#media only screen and (max-width: 2000px) {
.one{display:block !important; }
.two{display:none !important;}
.three{display:none !important;}
}
#media only screen and (max-width: 920px) {
.one{display:none !important;}
.two{display:block !important;}
.three{display:none !important;}
}
#media only screen and (max-width: 479px) {
.one{display:none !important;}
.two{display:none !important;}
.three{display:block !important;}
}
I tested de site with Responsinator and aparently it was working fine but then I tested de site with a cellphone and:
The hide and show element properties were not working. I tested with several phones and the result were the same.
Doing several test I found this:
[http://lifecrypter.io/] close the website inside a frameset tag
Testing on mobile device the original site link in S3
Now I can see the hide and show properties are working fine.
I tried to modify the meta tags of the page but
The meta tags show before are the only ones I can modify
There is any way to fix this?
Try adding a viewport meta tag.
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Possible duplicate on this question. #media query not working in mobile. Works fine in Chrome
. Hope it Helps!

Media Queries are affecting the desktop version, but not the mobile version

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

How to fix blogger template for mobile devices

I have a blog http://bdbloggerhub.com . It's fine in pc but when i visit it with mobile or tab it shows a blank pic above the post pic. How to remove it?
try adding .img-thumbnail{display:none;} at the end of your styles.
or for particular screen size add the following styles.
#media only screen and (max-width: 479px)
.img-thumbnail {
display none;
}
#media only screen and (max-width: 767px) and (min-width: 480px)
.img-thumbnail {
display:none;
}
you can also use the {width:0; height:0} properties in place of {display:none}

Mobile Media Queries

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;
}
}