I have a big problem with Bootsrap and CSS media queries on mobile devices (phone and tablets). Basic I'm using default Boostrap grid with some CSS media queries to adjust few things (like to hide/show mobile menu from Bootsrap).
Based on a desktop browsers (Chrome and FireFox) all works fine and layout is responsive. In that case I have used col-sm- classes but on mobile devices it wasn't working (tested with Nexus 7 and LG3) so I have decided to see if col-md- and that grid works fine but shouldn't effect Nexus 7 in a landscape mode.
After problem with the Bootsrap grid I have a problem with regular CSS media queries like #media screen and (max-width: 768px) {} - is not triggered on Nexus7 or LG3 (should to be triggered at least in a portrait mode).
Site to see all those issues is here: http://bgcnj.org/
Any clue what is going on?
Add this in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will allow your mobile-specific CSS to be applied.
Related
I'm having problems with my CSS media queries on iOS devices. I tried with and iPhone 11 Pro (safari, xcode simulator) and and iPad Air 2 (Google Chrome)
https://docs.google.com/presentation/d/1aNMcbX73dEDlokOhm2XPBkEjxCH_2iINBV3BbAT9-q4/edit?usp=sharing
The first slide shows how my website looks on the default Chrome configuration; mobile. As you can notice, it takes the media queries from a smartphone, instead of the 1024px media query I wrote.
The second slide is after requesting desktop view how it should look according to the media queries.
The third slide shows media queries applies properly on Android phone and not properly on Safari on an iPhone simulator.
<meta name="viewport" content="width=device-width, initial-scale=1" />
I wrote this html meta tag like this and nothing changes.
Source code if required.
https://github.com/erickcm2k/newProjectPortfolio/tree/master/portfolio
Update
Here is the path to my CSS reset file i got from: https://meyerweb.com/eric/tools/css/reset/
https://github.com/erickcm2k/newProjectPortfolio/blob/master/portfolio/src/Containers/reset.css
Everything worked fine after commenting this line
-webkit-text-size-adjust: 62.5%; /* Line 205 */
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...
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 am building a PhoneGap/Cordova project for iPhone.
I have 2 css files - one for general CSS rules and one for iPad relevant css that look like this:
<!--Main Style Sheet-->
<link rel="stylesheet" href="css/styles.css" />
<!-- iPad specific css-->
<link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="css/ipad.css" type="text/css" />
The issue is that the iPad css is just behaving like normal css. CSS I put in there appears when I run both iPhone and iPad simulators.
Can anyone help me out?
Thanks!
For iPad you want min-device-width, not max-device-width (ie. an iPad has a minimum width of 768px in Portrait mode)
max-device-width gives us a maximum not a minimum, so it will affect all devices below 768 px including the iphone. Giving a min width too should fix it. Probably (min-device-width:481px)
In case the aforementioned solutions do not solve the problem for some readers, this question is directly relevant to responsive web design.
I would recommend utilizing only one style sheet with a media query inside of it.
#media screen and (max-width:768px){
/* Device Specific CSS rules here */
}
I have chosen max-width here because anything above that will render the normal CSS. You my then set up another media query with max-width of approximately 500px to target smart phones. Keep in mind that the media query automatically inherits all of the normal CSS rules specified and the only rules that need to be defined inside of the media query is the device specific styles.
This does exactly the same thing; however, this only requires the browser to parse one style sheet, generating a faster load time (minimal, but faster none-the-less.
When using a media query, you are also required to have a viewport meta tag in your HTML. Otherwise, your devices will render the same CSS as a desktop.
Also, CSS3 Media Queries are supported by most modern mobile browsers.
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.