I'm testing my responsive website and sadly, the Chrome emulator is not showing the responsive views when I select a device e.g "iPhone 6". The nasty scroll bars appear and looks horrible however, when I resize my browser the breakpoints are working perfectly?
This is how I am defining my breakpoints - the variable $screen-md is set within a variable. I'm using SASS.
#media screen and (min-width: $screen-md) { }
Here is a screenshot of what's happening in the Chrome Emulator.
1) Check if $screen-md is storing 375px since Iphone6 is 375px wide
2) Change your min-width to max-width.
Explanation with example:
#media only screen and (min-width: 375px) {...}
above code means "If [device width] is greater than or equal to [375px], then do {...}"
#media only screen and (max-width: 375px) {...}
above code means "If [device width] is less than or equal to [375px], then do {...}"
3) My personal experience with Chrome is that it sometimes doesn't load the media queries even if you are on the right viewport size. A few times, I had to increase the max-width value by 1 or 2 pixels to make it work. Try that too! Also, don't forget to clear your cache and refresh the page.
Related
I read the iPhone 6/7 (S or not) has a browser width of 375px.
However, I am writing a simple #media query like this:
#media only screen and (max-width : 375px) {
....
}
I found out that is not working until I increase the max-width to exactly 980px.
Why is that?
How can I make a #media query that treats the phone like it has 375px? I don't care how dense is the screen resolution, it is a small phone and I want to apply a phoney web design, without destroying the design for devices like tablets or small laptops with around 1000px resolution.
Ideally it should work with col-xs-X bootstrap's styles.
There is definitely another media query or default style overriding this.
Your media query is correct, but ALWAYS MAKE SURE that your media query is at the very end of your style.css file (Or whatever the name is).
Whenever I press ctrl+shift+m to enter responsive design mode in Firefox, it shows the screen dimensions in the upper left, but if I see 992px as the width here and then create this media query:
#media (min-width: 992px) {
/*stuff to happen at 992px*/
}
, the stuff that is supposed to happen at 992px actually happens at 1082px, according to Firefox. Why is this? Is there a way to get Firefox's measurements to match exactly with the results that media queries produce?
Additionally, stuff that is supposed to happen at 768px according to the media query appears to be happening at 838px.
The answer was that the amount of zoom in Firefox messes with the responsive design mode measurements. Apparently, the dimensions shown in responsive design mode aren't the virtual dimensions of the website but are instead the screen dimensions, so they don't change when Firefox is zoomed in or out.
Try this code:
#media (max-width: 992px) {
/*stuff to happen at 992px*/
body{
background: #000;
}
}
Instead of
#media (min-width: 992px) {
/*stuff to happen at 992px*/
}
In Firefox, Make Sure while testing for website responsiveness , the browser zoom setting to be 100% only. It effects the screen width shown to you in RDM (Responsive Design Mode).
I am not sure about others but i got same issue earlier.
I've seen other questions, but no answer has helped me yet.
I have set a media query to:
#media only screen and (max-device-width: 767px) {
/* css here */
}
which I want to make the page on phones render the same in both landscape and portrait.
on my 2 available iphone 5's - a 5 and a 5c, portrait works great, landscape totally ignores it.
i've tried the specific landscape orientation tags, and that also fails.
i've also tried setting the max width to 1500px just in case of some retina thing - and that also fails in landscape.
i've run the css through lint - and that didn't find anything all that bad, even. so i think the css is ok (if not lint-perfect).
the site is locked for now till i hear back from my client - so posting a link won't help. But has anyone else seen this issue, and is there any fix out there? When i get back home tomorrow i can try an old Android phone and see what that does. But for now it's driving me crazy!
Do you have to use max-device-width? because if you change it to use max-width you will keep all the styles up to that size.
The difference between them two is max-device-width if you view the site on a browser and shrink it down it doesn't become responsive but if you use max-width it gives the site a responsive feel when shrinking the browser.
#media all and (max-width: 767px) {
css in here
}
I prefer using max-width.
The only case I can think of we should use max-device-width rather than max-width is when we need to keep something consistent even when browser window has been re-sized.
I have a set of rules I'd like to apply to all screens smaller than 960px wide.
The obvious was:
#media only screen and (max-width : 959px)
However this fails with iPad in portrait mode. I've read that iPad reports its width and height the same regardless of orientation.
Is there a standard way of making sure the iPad (or other devices that use the same logic as the iPad) respect actual width being viewed?
Obviously I'd prefer to avoid "iPad-specific" rules, or orientation queries - the query should apply to any screen less than 960 pixels wide.
Thanks.
Try using #media only screen and (max-device-width : 1024px) instead. That should cover an iPad in landscape or portrait.
I've read that iPad reports its width and height the same regardless of orientation.
This is tricky. The iPad reports the same max-device-width regardless of orientation. However, it correctly respects different max-width at different orientations/widths. The device is the part that doesn't change.
Hope this helps.
I've built a nice template that has four different layouts using #media queries:
850+px width
<850px width
iphone landscape
iphone portrait
It works awesome, until you size your monitor window down to below 480px (iphone landscape) and then it starts picking up the smaller size #media queries.
Is there any way to avoid this?
I personally feel like it's desirable to display the "iPhone" layout at smaller browser window sizes, as your content has likely been optimized for that layout, HOWEVER, if you really want to prevent this you can play around with the device-width property in your #media declaration. Something like #media only screen and (max-device-width: 720px) { ... } will target device width rather than viewport width. Compare the behavior of this (viewport width) vs this (device width). Play around with the values (change min to max, change the pixel sizes, etc.) and observe the behavior. Also, don't forget that you can combine #media rules, e.g. #media (min-width: 400px) and (max-width: 600px) { ... }. See what works for you.
The problem with this method is that mobile devices come in all shapes and sizes, so you might be serving undesirable styles on a different mobile device (let's just say an Android phone...) that you hadn't planned on. However, depending on your needs, this might not matter to you.
Here is a list of example media queries and sizes to guide you, if you do decide to go this route: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ (sorry for the lack of a working link; apparently I'm not cool enough on StackOverflow to post multiple links yet)...