I'm trying to use media-queries in my CSS for the first time, but I don't seem to be having much luck getting it to work.
To test, I wanted my #page-wrap to resize to 440px when something like an iPhone is looking at the page, but nothing changes.
This is what I've used.
#media only screen and (max-device-width: 480px) {
#page-wrap {width:440px;}
}
I also put this in my header.
<meta name="viewport" content="width=device-width, initial-scale=1">
Is this correct?
Is there a specific reason you're using max-device-width? Unlike max-width, it will not help with people rotating their device or other types of adjustments.
Instead, stick to using max-width, like the following:
#media only screen and (max-width: 300px) {
#page-wrap {
width:100px;
}
}
Check out this jsFiddle that illustrates it.
Try this for your media query:
#media only screen and (max-width: 480px) {}
Related
I have this piece of code. I'm beginner :/
https://ibb.co/ccrFFG
Id like to add some responsibility by
#media only screen and (max-width: 320px) {}
but it doesnt works with IDs. How would you change the code pls? :)
Thanks
From your code, I don't know exactly what you are trying to achieve but I will advise you to use the code below as a guide.
#media screen and (max-width: 320px) {
#yourID {
width: 260px !important;
}
}
css media-querys only work if you use the viewport meta-tag, make sure that you use it on your site.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You can ready more about it here:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I have a bunch of media queries that load a different background image depending on the width of the screen. For some reason my One plus 2, with a screen width of 1080 in portrait is triggering the (max-width: 400px) clause. Why?
I suspect it is something to do with pixel density. If this is the case, is there a list somewhere of the most common screen sizes when taking pixel density into account?
#media screen and (max-width: 1080px) {
.mainImage {
background-image: url('shop-home-vertical-1080.jpg');
}
}
#media screen and (max-width: 800px) {
.mainImage {
background-image: url('shop-home-vertical-800.jpg');
}
}
#media screen and (max-width: 600px) {
.mainImage {
background-image: url('shop-home-vertical-600.jpg');
}
}
#media screen and (max-width: 400px) {
.mainImage {
background-image: url('shop-home-vertical-400.jpg');
}
}
Edit:
The viewport I have is:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Using devtools to inspect the full width of elements on the screen. The screen width seems to be 360px. Exactly 1080 / 3.
It looks like it could be a problem forgetting to set a viewport. Try including this into your head <head> <meta name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
This is caused by the device pixel ratio, which down scales the actual device ratio.
Here is a list of phones and the actual display resolution used by media queries. It doesn't include the One plus two (which has a ratio of 1:3)
The following allows me to target the one plus two accurately.
#media screen and (max-width: 360px) and (orientation: portrait) and (min-resolution: 3dppx) {
.mainImage {
background-image: url('shop-home-vertical-1080.jpg');
}
}
As I understand it. In most circumstance I shouldn't do this. But in this case it allows me to download a higher resolution image for screens that can take advantage of it.
Just discovered that dppx is not well supported yet. This won't work on safari.
This is a site that I am coming into after the developer quit. I have got everthing done but I noticed that it no responding below 480.
Here is the site
Here what I have in the head
<meta name="viewport" content="width=device-width, initial-scale=1">
Here the css for that part:
#media only screen and (min-width: 321px) and (max-width: 480px) { There some css in here }
This is a custom template for wordpress that someone created. So I am at alost I have worked many hours trying to figure out what is wrong with it. I hope someone can help PLEASE!
This should answer your question:
#footer .partners {
float: none;
width: 494px;
margin: 0 auto;
}
This div is never going to get any smaller than 494px. It also will not let it's parent(s) get below the width of it's widest element, which is this one, which is why the entire site will not go below this width.
What this CSS is saying is that the rules said in your media query will be applied when the width of the screen is between 480px and 321px. If that is what you are trying to do, it seems to work fine. Here is some test CSS and the JSfiddle result (resize the JSFiddle window)
#media only screen and (min-width: 321px) and (max-width: 480px) {
body {
background: red;
}
}
Can you be more specific in what your trying to achieve, it seems to work fine for me.
I have searched and searched and I can not seem to find a reason why my html meta tag is not working on my iPhone. You can visit my website at http://hadenhiles.mooo.com. If you resize the viewport (window) you will see that my site responds totally as expected... however when you view it on a mobile device you get a result that looks as though it is a desktop version. here is the head tag and it's contents:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
As you likely have noticed I use my own stylesheet as well as the bootstrap3 stylesheet. I know I should likely stick to one or the other when it comes to layout but I made this website using only my own media queries before I was introduced to bootstrap. I only use bootstrap in the footer and for popups/navbar features. Anyway bootstrap is not the issue. It seems as though the meta tag is not recognizing the device width and is not setting the initial scale to 1.0. I have tried varying the min-width of my queries to debug but had no success. Here is are my css media queries:
/* Main css */
#media only screen and (min-width: 1px) and (max-width: 320px){
/* content */
}
#media only screen and (min-width: 321px) and (max-width: 600px){
/* content */
}
#media only screen and (min-width: 601px) and (max-width: 768px){
/* content */
}
#media only screen and (min-width: 769px) and (max-width: 1020px){
/* content */
}
I have tried switching from #media only screen and to #media screen as someone suggested in another question but had no success either. At first I thought that the min/max width was too big/small for mobile devices so I changed that and nothing happened. I have had this problem for about 3 months now so I decided to publish my own question. Any help you can give me is much appreciated.
~Haden
So this isn't exactly defining what's going on, although I do think that it is due to min and max conflicts. Try setting only max-width since that seems to be covering everything. It seems redundant to say min-width is 1px and max width is 320px and then for the next media query to be 321px. If you set the max-width to 320px, it will cover that range. If you set the next one to 600 pixels, it will cover the 320-600 range, etc.
#media only screen and (max-width: 320px){
/* content */
}
#media only screen and (max-width: 600px){
/* content */
}
#media only screen and (max-width: 768px){
/* content */
}
#media only screen and (max-width: 1020px){
/* content */
}
Alternatively, you might try using min-device-width and max-device-width. Here's a link to a decent resource on media queries for standard devices.
I added #media screen css in an effort to change my website but it doesn't seem to be responding. I added meta name = "viewport" content="width=1200, width=device-width" to the HTML and that was the only thing that effected the way my site looks on my phone. In the CSS I added the following but it has no effect.
#media screen
and (max-device-width: 768px)
and (orientation: portrait) {
body {
max-width: 600px;
}
#sidebar {
width: 0;
}
}
#media screen
and (max-device-width: 1000px)
and (orientation: landscape) {
body {
max-width: 800px;
}
#sidebar {
width: 0;
}
}
So how do I:
Get this to work, is my CSS wrong?
Is there a way to specifically get rid of the #sidebar in #media screen css?
Try This (Not Tested)
#media handheld and (orientation: landscape),
screen and (max-width: 1000px) {
body {
max-width: 800px;
}
#sidebar {
width: 0;
}
}
It is possible that an old version of your CSS file (before your changes) has been cached by your phone. If you have PHP, a nice way to get around this is:
<link rel="stylesheet" href="styles.css?ver=<?php print filemtime('styles.css') ?>">
That way, the stylesheet is only redownloaded when it needs to be.
If you don't have PHP, you can always just change the ?ver= paramater by hand each time you make a change in your CSS file.
This may or may not be your problem, I don't know. But it might help.
Code looks alright to me. Have you tried to do a hard refresh?
shft + f5 to my experiences fixes CSS when you don't notice a setting applied. Also deleting the cache helps too!
Also to get rid of #sidebar
#sidebar{
display:none;
}
will hide it when you hit your #media.
Hope that helps :)
#media works for everything. e.g my phone has a width of 720px for eg. when you have CSS #media for mobile at 720px; the following CSS will apply if that makes sense. Should read on mobile first responsive design if that's what you're trying to achieve, but that's a whole different topic. As for the code in your #media, you are targeting mobile devices, not laptops/computers. Incase you're not aware of that. so if I'm thinking right the CSS will apply only to mobile devices. For laptops/pc, #media (max-width: xxxpx) {} would do it :)
Thank you to Akira Dawson for the display portion. It appears that I needed to get rid of content="width=1200" for it to display properly on my iPhone. In addition what I ultimately did was got rid of #media screen and changed it to #media handheld for it to take effect on my iPhone. For whatever reason #media screen would not work. It's interesting because I was told #media handheld doesn't work on the iPhone but apparently it does.
As far as I understand it content="width=1200 says that your site needs a viewport of at least 1200px which is contrary to max-device-width: 768px
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> should probably fix your problem.
source: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag