I have media queries in a css file set from 0-500px and 501-1250px and so on...
My CSS breakpoints work great in the screen emulator in the Chrome developer tools when I have "Emulate Mobile" checked in the "emulation" tab. When that is unchecked or when I view it in the browser without dev tools open, it doesn't honor the breakpoints.
The breakpoints also work fine in Firefox's "Responsive Design Mode" but not in the regular browser when I close the dev tools.
I'm not sure how to best ask the question--Is it possible to get the styles to work in a regular browser?
here is a video of my screen demonstrating the problem:
https://youtu.be/_FBoDek0Ou0
After looking at your video, the media queries look like the issue. You are checking for device width, which the browser sees as the FULL SIZE of your screen, rather than the width of the browser.
Try writing them like this:
#media all and (min-width: 1251px) and (max-width: 2600px) {
*/ code here /*
}
Notice it is checking just for the min-width rather than min-device-width.
I suggest you also have a read of these: https://css-tricks.com/css-media-queries/ and http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/ to get more of a grasp on how they work.
Related
I am using Wordpress with a responsive theme. When I display the content on a mobile device the theme is displayed properly with a regular browser.
When switching into the broswers 'Desktop mode' the responsive theme behaves little bit strange. I guess this is due to the used screensize. Is there a way to display the used CSS media query?
In sense of when CSS says media min-width: 1024px can I see somewhere which screensize CSS is using? Or does there exist a simple page where to test it?
Or even better: How to detect if the browser request a 'Desktop version' of a site and use it for CSS?
I Googled but didn't find any help how to detect it but didn't come up with helpful hints.
window.innerWidth is what you're looking for. Plug it into your dev console and you'll get the exact width after scaling in pixels.
You can use the inspector-tab from the developer tools inside the browsers to view the css-rules an element currently uses.
You can also see and set the size of the browser viewport with the help of the developer tools. Most browsers have a set of presets to simulate specific mobile-screens. This is very helpful for testing and debuging responsive rules/styles.
In styles panel of dev-tool you can search for it.
You can also use show-hide media-queries option.
Is there a way to display the used CSS media query?
I think what you're looking for can be found in your browser's dev tools. In the screenshot below, I tried resizing this exact same page and inspect it using Chrome dev tools. Under elements tab and styles you can see if your media query is being triggered. Please see the screenshot below...
can I see somewhere which screensize CSS is using?
Your browser dev tool will most likely have a feature that displays the current size of your browser window. In the case of Google Chrome, you can see the current size of your browser at the top right corner of your screen while you resize. Please note that the size will only display if the dev tools is currently open and you're resizing the window. Please see the screenshot below...
P.S.
ADDITIONAL:
If you want to have more like a javascript solution, you might want to check out this library. https://github.com/ryanve/actual
Based on the description, it "Determine actual CSS media query breakpoints via JavaScript". Please note that I have not personally used the library myself so I can't really say that it works.
You might also want to check this article that discusses how to detect a media query using Javascript - http://zerosixthree.se/detecting-media-queries-with-javascript/
Hope this helps! :D
the easiest solution is to use 'Window Resizer' (2.6.4) chrome extension
it will give you a popup window that will allow you to resize the view port to any of the standard sizes (xs, sm, md, lg etc.)
open the website in your computer browser and reduce the size of the browser like this example and right click on the center of the page and click inspect then you will be able to see all css style of the website when the website is small
Here is the result when i reducing browther width to 740px. No scrollbar;
Same width but in chrome device toolbar
Now scrollbar appears.
This happened because i'm using negative right margins in some blocks, but i also using
body { overflow-x: hidden }
to prevent scroll. It works perfect until i turn on chrome device toolbar. What is the reason of this behavior? Should i don't use negative margins?
I was having a similar issue, and found an answer that may help you here.
For me the issue was the Media queries I was using looked like this:
#media only screen and (max-device-width: 600px) {...}
The -device- part of the selector, ensures your CSS is only being applied to mobile devices. Consequentially, the chrome device toolbar is used specifically to test CSS on mobile devices, which is probably why you are seeing the css applied properly there, but not when you resize your browser window on its own.
Try removing -device- from your media queries to instead look like this:
#media only screen and (max-width: 600px) {...}
Which should apply your CSS changes on both mobile devices and desktop.
Also make sure you have the following code in your HTML header, to ensure the viewport is configured properly:
<meta content="initial-scale=1.0, width=device-width" name="viewport">
Hope this helps!
chrome tool is for mobile device testing. it actually display mostly same in mobile device. without chrome tool it will display for desktop browser compatibility.chrome tool
so chrome tool actually gives the view mostly same as mobile device.
for mobile view testing it's better to use chrome tool for responsive mode.
chrome tool uses User Agent.
The User Agent Type, or Device Type, setting let's you change the type of the device. Possible values are:
Mobile
Desktop
Desktop with touch
I am developing a responsive website without bootstrap. I am able to see the desired response using Mozilla developer tools but the same response is not functioning on re sizing the browser.
Make sure you are not using max-device-width: for your media queries. You should be using max-width or min-width if you want them to work when resizing the browser.
The former will work in Developer tools.
Chrome has mobile phone simulator in developer's tools.
But when I activate it and the viewport shrinks media queries don't detect it and the CSS rules specific to smartphones don't get applied. Is there any way I can make them detect the shrinking?
After you select the desired size & sensors, did you tried to refresh the page?
How to debug css for orientation:portrait in Chrome Developer tools?
What ever I write inside (orientation:portrait) can't edit on the fly from Firebug and Chrome Developer tools. It always shows the normal Properties.
/*normal styles here */
#wrap {
width:1024px;
}
#media only screen and (orientation:portrait){
/* portrait styles here */
#wrap {
width:768px;
}
}
"A browser or device determines the orientation by listening to the width and height of the window. If the height is larger than the width the window is in portrait mode. If the width is larger than the height it’s in landscape mode."
More info: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
Basically you need to resize your browser window for the portait orientation css to take effect.
If you open firebug within the browser window ie. firebug is at the bottom, the height of the browser window changes, causing the orientation to become landscape, thus you are losing your portrait styles. For both firebug and chrome developer tools, try launching the tools in their own window so your browser size is not affected.
PS. I would use Firebug for this kind of editing because you can clearly see the css changing as you resize the browser.
Since recently (Chrome 17), Chrome DevTools display the media query context affecting every matched CSS rule (if present). While the current implementation does not update the styles on media query evaluation changes (you need to re-select the affected node), http://webkit.org/b/74292 tracks the request to dynamically update the matched CSS rules.
As they say above you can resize your browser window to have the height be larger than the width so then the media portrait is true.
You can use this url http://robnyman.github.com/matchmedia/ so resize the browser, refresh that page and you will see if is detecting true for portrait.
Finally now It's possible in Firefox 16 responsive mode. Check Youtube video here http://www.youtube.com/watch?v=t07cLJhJkjQ