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...
Related
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!
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.
I have a Ruby on Rails app developed with bootstrap and have included media queries in my 'static_pages.css.scss' file:
#media all and (max-width: 1000px){
.header-logos
{
display: none;
}
}
There is more code within the #media queries but just keeping this short.
I have also included:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
The responsive design works on my desktop as well as my nexus android device in chrome. I have also tested it on a samsung galaxy and it works fine.
If I load the website on an iphone or ipad (safari or chrome) the menue loads correctly but the rest of the screen goes blank (seems to flash for a second the correct display then goes blank)
Feel free to see the result by going to www.bathtub2boardroom.com
Any advice?
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!
I'm having a strange problem that only occurs with IE9. I'm working on a web page that has a desktop layout, and a mobile layout. Same HTML, different CSS. The problem happens with the code below:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)
All browsers, with the exception of IE9, show desktop site as needed. Mobile browsers correctly show the mobile layout. The problem with IE9 is that it also shows the mobile layout.
Now if I remove the words "only" and "screen" from the above code, IE9 then correctly displays the desktop site. The problem is, then the mobile browsers also display the desktop site. I've done some research on this, and haven't seen anything on this issue.
Thanks for reading,
John
Just in case anyone is crawling SO for an answer to this, the above two answers aren't solving the core problem which is answered here - CSS media query not working in IE 9
Basically inline CSS3 media queries DO work in IE9 but you have to disable Compatibilty mode -
<meta http-equiv="X-UA-Compatible" content="IE=9">
The above meta tag needs to be placed before any other meta tags otherwise IE9 will default to compatibility mode on and will subsequently not work.
From what I can tell, it comes down to IE9 not interpreting "min-device-width" and "max-device-width".
According to http://msdn.microsoft.com/library/ms530813.aspx it does not support those properties, only "min-width" and "max-width".
In addition, http://www.w3.org/TR/css3-mediaqueries/#error-handling states that the browser is supposed to ignore properties that it does not recognize. Not so with IE9 it seems.
Yes, use the #media (max-width: 860px) instead of max-device-width.
IE 9 just gave me a heart attack. The project media queries did not work.
Then after some minutes of googling, you have to include the CSS in the HTML.
Inline styles only!
What a drag these IE browsers are!
I usually add this to my projects and it's been working for me so far:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
IE compatibility mode solves the issue.
Go to Compatibility View Settings and disable the option Display intranet sites in Compatibility View.