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.
Related
My apologies for writing so much but I wanted to put what I’m doing into context. So I’ll ask my question first:
Why does the HTML and CSS this link to a responsive navbar stop working when I change its “max-width” media queries to “min-width”, pixel-based media queries?
https://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/#nav
All I need is to understand why I can’t make the HTML and CSS behave exactly the same way with min-width, pixel-based media queries. What do I not get? I’ve been working with Responsive web design and development for a few years. But this clearly proves I don’t understand responsive css the way I need to. I’m coding up a responsive website from scratch for a client of my own without Bootstrap so I can hard-wire my understanding on the principles that Ethan Marcotte sets out in the second edition of Responsive Web Design.
I’m not trying to be lazy by not posting my own code. This is the exact same structure navbar I want to use for the site I’m building, and you can go straight to the relevant HTML and CSS in the above link. I’ve tried making a linked stylesheet of the embedded CSS and HTML in the above link. I’ve injected it into my own site as a separate linked-stylesheet but I’m still running into the same brick wall.
My breakpoints structure in my own stylesheet is:
`/* ====MOBILE FIRST===== */
/* Custom, iPhone Retina */
#media only screen and (min-width: 320 px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width: 480 px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width: 768 px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width: 1024 px) {
}
/* Desktop */
#media only screen and (min-width: 1280 px) {
}`
I also don’t want to have one big monster stylesheet, so I’m trying to link the navbar stylesheet to the main stylesheet, using:
`#import url('mainstyles.css');`
I know that essential css rules for breakpoints must go into specific media queries. But if all the CSS in the above navbar link have to go into all five “min-width” based media queries - that’s just CSS bloat - isn’t it? And too much unnecessary CSS code?
I’ve spent three days on it and I just can’t get the fundamental reason. How do I make the above nav bar BEHAVE EXACTLY THE SAME WAY after changing the “max-width” media queries to “min-width” pixel-based media queries? I’ve tried changing the “width” and all style rules relevant to display to percentages - but it’s not solving the fundamental reason. Many thanks in advance for all advice.
Keith :)
max-width means the query will work up UNTIL the specified width.
min-width means the query will START working at the specified width.
Your first query will work from 320px to 479px. Your second will work from 480px to 767px, and so on (you have no query for 0-319px).
In order to change max-width to min-width you'd need to bump each query down a level (XS would become min-width: 320px, Desktop would become min-width: 1024, etc.)
I've included a simple answer below, as I found, once you get the basics right with Media Queries, its an easy concept to then apply to more complex ideas...
The example below could be used for firstly, a smartphone, then going up to an iPad, then finally a landscape iPad and a desktop device...
#media screen and (max-width: 600px) {
/* Stylings for all devices with screens with a width of 600px or less.*/
}
#media screen and (max-width: 992px) {
/* all screens with a max width of 992px or less */
}
#media screen and (min-width: 992px) {
/* all screens with a width of 992px or higher */
}
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.
I want to hide specific elements on my page for tablet and mobile devices. So I used:
#media (max-width: 991px) {
.popup_overlay {
display:none !important;
}
}
Problem appears when I open the web page from my mobile which has a resolution 1920x1080 and the element appears but its not displayed correctly as the div is not optimized for small screens.
Any suggestions how to do this the proper way?
You can add to your media query to target very high pixel density phones and tablets with min-resolution and device-pixel ratio.
See more about that here: http://css-tricks.com/snippets/css/retina-display-media-query/
I'm not fully sure how this should work on desktops, but I'm pretty sure that when you resize the browser, the orientation should change (provided the height was bigger than the width and after resizing it's the other way round).
So that said, I have no idea why the following code only comes in effect on pageload.
#media all and (orientation: portrait) {
.slider-slide {
background-size: auto 100% !important;
}
}
#media all and (orientation: landscape) {
.slider-slide {
background-size: 100% auto !important;
}
}
Basically what I want this code to do is to resize a background image based on the orientation. If I have the page resized properly on pageload, both work, but when I resize the window on the fly, it doesn't work. Any ideas?
Fabrizio Calderan's solution is the best for the given use case, but if you need to detect changing to/from portrait and landscape, the answer to the original question is, yes, this will work.
You can see http://robertnyman.com/css3/media-queries/media-queries.html for a working sample.
The primary difference I see is that Robert used screen instead of all. So:
#media screen and (orientation: portrait) {
...
}
Beyond that there are probably some differences in browsers. Robert's solution worked for me in Chrome and FF. I am not sure about other browsers. (on a side note, there has to be a better caniuse than caniuse.com :) )
i am new to web development. terrible at math as well
i was wondering how does pixels translated from one screen size to the other on a webpage. Say for example, I specify
margin-left: 50px;
if i load this web page in my ipad webview, i measured it (using a ruler software, in px) it is indeed 50px
if i load this webpage in my desktop browser, it is indeed 50px
but when load this webpage in my iphone webview (which takes entire iphone screen), it is measured as 40px, not 50 as i specified.
sure iphone screen is smaller, it needs to do some scaling i guess..? is that right?
how is this conversion done? what is the process? is there some sort of formula?
what does this mean for designers? how do i know the right size i should assign, so the layout does NOT break on all screens?
i generally code on bigger screen first, then see how it runs on the smaller screen. is this the right approach.
i want a good and big answer for #2, can someone please help
Do you have overwritten the margin of body? Some browser have different default values. If you look at the IE6 you will find something like this:
"IE 6 default margin on body is 15px (top and bottom) 10px (left and right)"
It is a good practise to have a css-file with some default values the reset the browser defaults.
I would highly suggest that you look into relative sizes...it will be relative to the device. Check out any article about Responsive Web Design. Hard pixel values are a no-no, if you get the percentages and relative sizes it generally fixes a lot of issues. Now if you are new to web development you will want to do some learning before diving into responsive. You can also probably do a little studying on media queries. Just media query it for a temporary solution.
I would suggest you look into jQuery Mobile and viewports. Basically you need to set everything by percentages not fixed width because each device has different screen size + you need to consider horizontal vs vertical view.
This viewport meta makes sure that the page is sized to 100% of screen width in any case:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
#media (min-width: 1200px) {
#media (max-width: 980px) {
#media (max-width: 979px) {
#media (min-width: 980px) {
#media (min-width: 768px) and (max-width: 979px){
#media (max-width: 768px) {
#media (max-width: 767px) {
#media (max-width: 480px) {
Taken from Joomla 3.0