I am having some issues with media queries. They're just not working. I have a pretty blank site right now - it's just one page with one img in it.
This question is related to this one, but is not a duplicate.
In my previous question, I was unable to get the image to center horizonally on the page when the max-width was 480px.
The code I was using:
#media (max-width: 480px)
{
img
{
display: block;
margin-left: auto;
margin-right: auto;
}
}
Now, I have managed to solve that - partially - by adding:
<meta name="viewport" content="width=device-width" />
to the head section of the document. But now, on a different phone which has a width of 1280px, the img still centers! Even though the only style in my CSS specifically says max-width:480px.
Why is this happening?
I have two phones. One phone is 480px wide and the other is 1280px wide. Why does the img center on the 1280px phone when it shouldn't be?
Found this - http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
Apparently, a devices resolution impacts its css width. I think css itself has an average pixel width which may or may not correspond with high-res devices out there.
So, according to this page, your 720 width still falls under CSS' understanding of 480. Hope that answers your question.
What you could try is -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The above is from https://stackoverflow.com/a/19933195/3652449
Related
Why is my website on mobile showing up like this rather than the content only? Am i missing some CSS? pls not I am using box-sizing:border-box in body. I used some media queries, but the website is so zoomed out and all of the content on the left on mobile view. You can check out the entire website at http://assistantmarcus.ml for the entire front-end.
PS: The page is perfectly zoomed in on mobile mode, its just that the user can easily zoom out making it look real bad. Is it because of the blob i put in?
Whenever you paint content outside the viewport, the browser will allow the user to scroll to it, on both directions.
By setting .blob's width to 150% on screens below 600px and to 290% on screens below 450px, you are rendering content outside the current viewport width, thus creating a horizontal scrollbar.
Since the content painted outside the viewport on the horizontal axis is irrelevant (you're only interested in the part of the enlarged element rendered inside the viewport), you probably want to disable horizontal scrolling on the body element:
body {
overflow-x: hidden;
}
See it here.
Side note: another way to enlarge .blob would have been to transform it, instead of setting its width and height:
#media (max-width: 600px) {
.blob {
transform: scale(1.5);
}
}
#media (max-width: 450px) {
.blob {
transform: scale(2.9);
}
}
I'm not just mentioning it, I'm recommending it. Using transform vs sizing or positioning has the big advantage of only happening in the compositor layer, without any effect on the layout and paint layers, which brings a big performance increase, especially when dealing with animations. This is well documented all over the web and I tried my best at explaining the mechanics here.
You are most likely missing the viewport tag inside your html head:
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
…
</head>
user-scalable=no in the meta tag helps to disable page zoom-in & zoom-out
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I am trying to get this working but somehow its not working in mobile. when i use chrome tool to overrides the screen size, it works fine. i am not sure what i am doing wrong. please help
#media screen and (min-device-width : 320px) and (max-device-width : 480px) {
.container .backgroundImage { display: none; }
}
There is a background image when viewed in browser. s i would like to remove that image when viewed in mobile BUT its not working somehow.. please help
=============
TESTING ON IPhone 3G, 4, 5, Android Galaxy Nexus
#Andy is right, double check your device-widths, or you could always just use min-width so you don't have to know every device width.
Regardless make sure you have a viewport tag, like <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Fantastic - forgot the viewport too!
Fot all:
Just add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in your head
I know this is an old post, but I recently had an issue like this. I ended up fixing it by removing the CSS media query from the main CSS stylesheet, and entering the specific needs for mobile on the html style section instead. Don't know why it worked, but it did.
Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.
Thus this worked for me:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
"I'm new to coding and I'm having trouble resizing my site for mobile devices. The website works okay for desktop, and everything's set except somehow it won't detect the device-width when on mobile, so the site stretches all the way, and I'd have to move around with the scrollbars."
This question has been answered! And if you've had a similar problem,
have a media query:
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="css/mobile.css"/>
and already tried:
checking if adding user-scalable or maximum scale would make any
difference
adding a set width or height to the html and body tag
deleting the margins
floating everything to the left
deleting overflow
deleting the reset
experimenting with min and max widths
using vh instead of %
There is an answer below!
Also here is a tutorial for mobile optimization that I used as reference.
You said you used vh to scale for it and it didn't work. I'm not sure why that happened (I'm assuming it's because the height of a website always changes depending on the amount of content in it). I think a better solution would just be to use vw or "viewport width". It's a good solution and it works great on the website I'm working on. Note: Might not work if there's a horizontal scrollbar.
Just find the width of your device in pixels. Try:
console.log(window.outerWidth)
Then, simply convert all px on the page to vw using the equation below that converts x pixels to this unit:
x * (100vw/window.outerWidth)
Note 2: This is not what you put in the code. Just use the equation, crunch the numbers on a calaculator, and replace all units on that page to vw.
Anyway, hopefully this helped!
Your <body> still has a min-width which is keeping it from shrinking down to screen size.
I added some rules to make it fit:
#media screen and (max-width: 480px){
body{
min-width: 0; /* let the body shrink */
}
#copyright{
margin-left: 0px;
}
#ladder{
width: 100%; /* have the screen dictate the image size */
height: auto;
margin-left: 0;
padding: 10px; /* still use padding... */
box-sizing: border-box; /* ...but make it go on the inside */
}
}
I have just launched my website http://www.connorgraham.com.au and am having mobile viewing issues. Prior to launch, everything was working and looking perfect, however I have just realised that on mobile, you are able to scroll to the right to show a white bar that covers 20% or so of an iPhone screen. The website should be full width and you shouldn't be able to scroll to the right. I believe there is some kind of viewport issue, however I am unsure.
I would appreciate any help, and am happy to provide any of my code if it would help solve the issue.
Im hoping you have access to the css files. You need to change the top logo and bottom logo widths using media queries. Right now there is a media query for the top logo set at 900px. This needs to be changed:
#media (max-width: 399px) {
.mobile-logo {
width: 200px;
float: left;
}
.footer img {
width: 150px;
}
}
#media (min-width: 400px) and (max-width: 900px) {
.mobile-logo {
width: 300px;
float: left;
}
}
EDIT: I changed media query to 399px
EDIT: I made the header logo 50px wider (now it is 200px instead of 150px) in the small query
Also, I would change the meta view port to the this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
From my experience it is a bad idea to prevent scaling. This sets the initial scale to 1 and if people want to pinch and zoom they can. This is ideal because you do not always know what the user likes, or if they have a medical condition/disability.
I think this is what you need:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
This should disable zoom and will prevent the issue (at least what I think the issue is).
EDIT:
As Charlie pointed out, there is a risk to completely disabling scaling, and a better alternative is to set it to a particular max value so users can still zoom some. This is particularly important for people with disabilities who may be trying to view your site.
What's the best way of simply 'shrinking' a site to fit on to an iPad, while making it fully responsive when it comes to mobiles?
Here's my viewport tag:
<meta name="viewport" content="width=device-width">
I had hoped that the following media query would enable the whole 1060px wrapper div to be displayed by forcing the device to 'zoom out' thus displaying all, like a mini version of the desktop display
#wrapper {
background: green;
margin: 0 auto;
width: 1060px;
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
body { min-width: 1080px; }
wrapper { background: red; }
}
The media query itself works (wrapper background turns red on iPad), but I still need to zoom out to view the whole page.
However, if I change to my viewport tag to:
<meta name="viewport" content="width=1080px">
I get the desired result, but this is no good since the mobile version needs to be fully responsive. So am hoping there's something I can add to the media query to achieve it.
Sure I'm missing something very obvious here - and seem to remember this technique working in the past - any help appreciated!
Many thanks in advance!
EDIT:
It seems this has been raised before, same issue, and yet no solution:
How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?