I've been coding websites using media queries for years but I'm baffled by this new behavior.
My breakpoint is #media only screen and (max-width : 1200px) but it doesn't respond until max-width is 1183px.
This is happening for all breakpoints, off by 17px. It's not the scrollbar, it's not a plugin or another script and it's happening on multiple computers. Page zoom is set to 100% and I have <meta name="viewport" content="width=device-width, initial-scale=1"> in my header.
This is not a production site so I can't post access but if someone has some idea as to why this might be happening, I would appreciate it!
Related
I'm facing the problem with media queries on mobile devices.
I've got something like this:
#media screen and (min-device-width : 320px) and (max-device-width : 480px){
/* Some styles*/
}
I'm testing my website on Galaxy S6. In Firefox everything looks fine and styles do change but when i load the same website in Chrome - there's no change and it looks like the media query doesn't work.
Does Chrome need some special queries?
Add this meta tag into the header of your HTML file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This should solve your problem. Otherwise the browser might not resize because it will not accept that the screen size is meeting your media query criteria.
I had this issue as well and I thought it was related to #media queries nesting (that only Firefox currently implements). Since it was a foreign huge CSS file I was dealing with, I wasted a lot of time separating each and every rule into more restrictive queries (ranges with min, max, pixel-ratio and resolution)...
Later I found that after this line:
<meta name="viewport" content="width=device-width,initial-scale=1">
In another template there was another line with:
<meta name="viewport" content="width=639, initial-scale=0.5, maximum-scale=1.0, user-scalable=no">
This was overriding the first rule and, with the exception of Firefox (mobile), it actually created a couple of problems:
all the media queries that had max-width under 639px were being ignored in Chrome (or the default Android browser);
queries with max-device-width syntax were also being ignored (only max-width ones worked).
So my suggestion is, before you head on checking all the problems in the CSS, have a look first at all the meta tags that may be affecting the viewport.
My website does fit to the screens of different devices but my media query styles are not working. The problem is also visible when resizing the wordpress website in an IE browser and when using a windows phone emulator (via IE 11). I've tried many different methods to fix this problem but so far none have been successful. All my media queries are in my main style.css
I've tried:
Changing <meta name="viewport" content="width=device-width"> to <meta name="viewport" content="width=device-width, initial-scale=1">
As per: Responsive web design is working on desktop but not on mobile device
Changing #media only screen and (max-width: XXXpx),only screen and (max-device-width: XXXpx) in my style.css to #media all and (max-width: XXXpx),all and (max-device-width: XXXpx)
As per: Media Queries not working in Internet Explorer 11
I've just deactivated -all- my plugins, cleared the cache, still unsuccessful.
I've also tried validating my website and cleaning up errors as per: Media Query x IE11
I'm completely at a loss and frustrated as this hasn't happen with other websites I've designed and built. I'd appreciate any help I can get with this! Thank you.
This problem has now been solved. After deleting and tweaking files and sifting through support forums for answers, I looked at the stylesheet. It turns out I was missing a closing bracket inside a media query.
/Facepalm...
It may be my ignorance, but I think any newbie question is welcome where there's an opportunity to distinguish between right and wrong.
For responsive and mobile-friendly design, I'm using
#media only screen and (max-width: 800px){}
from the very beginning with success. However when I uploaded the site to the server and browsed the site from mobile devices, it's not working. Then I learned to use
#media only screen and (max-device-width: 800px){}
Now it's working fine (Note: the -device in the middle).
But with -device in place I can't see the preview when developing the site in my desktop PC. So when I'm developing, I'm using without -device, and after upload I'm using the -device in the middle. It's a bit odd to me.
Recently I faced an interview board, where I submitted one of my mobile-devices friendly site for review, but when they resized the browser, it's not working because on the live site I used -device in the media query. So, it's a bit odd for me.
Is there a way I can code so that the code both works in Desktop with its media queries and also in mobile devices. I tried
#media only screen and (max-width: 800px) and (max-device-width: 800px) {}
But FAILED in my Desktop. :(
Is there a way?
EDIT
To acknowledge that, I'm in the right way, I'm using
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
in my <head></head> tag. And using Respond.min.js also.
#media screen and (min-width: 321px) and (max-width:960px){
xxxx
}
#media screen and (min-width: 720px) and (max-width:1024px){
xxxxx
}
JSFiddle
max-device-width is the width of the rendering area of the device,
max-width is the width of the target display area
max-width is the proper way to go with. Did you place de viewport meta tag in your HTML page?
<meta name="viewport" content="width=device-width, initial-scale=1>
I'm developing a site using WordPress. The site is centered and 1044 pixels wide. On desktop browsers everything works as expected, but when I check it on an iPad, the design is cut off on the right (using either iPad orientation) and I have to swipe to see it all.
http://oscarciutat.com/reciclar/home/
I added this CSS rule with no success:
body {
min-width: 1044px;
}
If I add the following meta tag the problem worsens:
<meta name="viewport" content="width=device-width" />
Any ideas about what I'm doing wrong here? Every solution I try doesn't work.
Thanks in advance
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- You can change the initial-scale to make it fit --->
Try using the above, that should make it work.
If not, you could use CSS media queries for the iPad screen resolution
#media (max-width: 1024px) {
YOUR CSS TO REDUCE WIDTH OF SITE
}
The iPad3 does indeed have a much higher resolution, but they all work with 1024x768 as viewport. Thats why it won't fit.
I used to start my work using html5-boilerplate instead of creating file from scratch. It is awesome for responsive web design.
I am developing a non-responsive website and client needs desktop version for mobiles too (remember how websites opens on mobile few years ago).
I did not make it responsive and do not add any styles in media queries.
I works fine on desktops but when we see the website on a mobile device(or less 940 px wide screens) it does not show complete backgrounds of full width containers(i.e. 100%) instead it only show the background according to width of device.
I am not sure but I think there is problem in following code which is meta viewport:
<meta name="viewport" content="width=device-width" />
I removed this code and test the website but problem remains. Can any one please tell me the solution?
Note: I have build the most of site and now I can not write markup from scratch.
I have found an easiest possible solution to this and its working for me. I just added following code into CSS file (my media query section of at bottom of main.css in case html boilerplate).
#media only screen and (max-width: 900px) {
/* Style adjustments for non responsive websites */
body{width:940px;}
}
Try changing it to the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Let me know if it works!