Ok so my media query is working fine in chrome, but when I try the code in firefox or ie, the margin-top or margin-left are different and not accurate like in chrome !!!
Here's the code I use:
#media screen and (max-width:800px) {
#box-move {
margin-left:-20px;
margin-top:40px;
}
}
So is there a special tecnique for firefox or ie?
Thanks.
It’s actually not a CSS or CSS interpretation problem at all–it’s the way Firefox does (or doesn’t) resize the viewport.
Unlike Google Chrome, and most other browsers, Firefox allows it’s toolbars to affect viewport size. The only way to make the viewport resize below the width of your toolbars in Firefox is to disable them.
You’ll need to go to View > Toolbars and uncheck each. Then try resizing and watch your media queries take effect.
I hope I explained that right. It’s been a trying day!
Related
Problem: The sizing and layout is different from the two browsers and I'm not sure how I can fix this
Note: They are both shown in full screen
In Chrome
In Microsoft Edge
It looks like your Edge browser's zoom is larger than it in Chrome. Please check the zoom in Edge and Chrome and make sure they're both 100%.
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.
Here it is: http://appdist.me
On Firefox and IE it displays correctly, but not on Chrome and Safari.
I'm using svgweb, but still no good.
How can I get Chrome and Safari etc. to display the content the same way as Firefox and IE?
I'm not going to post any code, just view the source of the HTML. :)
Thank you.
It seems to work well in both Firefox and Chromium by setting width and height attributes on the object tags to 100% and setting width and height attributes of the SVG elements in keyboard-gray.svg and frame-home.svg to 100%. Check it out:
http://live.echo-flow.com/stackoverflow/appdist.me/
Unfortunately, I don't have a Windows box available to test this in IE at this time.
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
I have managed to make the footer fixed in my web page.
I used the following in my CSS file:
#footer
{
position:fixed;
left:0px;
bottom:0px;
}
This works in all major browsers (IE 8, Safari, Firefox).
However, when I test this page on iOS Device (iPod & iPad) and Galaxy tab, this does not make the footer fixed at the bottom. Rather, when the page scrolls, the footer also scrolls up / down with it.
Can anybody help me with this issue. I want to ensure that if it works for mobile clients then it does not break the currently behaviour on desktop browsers. In short a solution working for both.
Thanks in advance.
Try this http://cubiq.org/iscroll-4
example http://cubiq.org/dropbox/iscroll4/examples/simple/
but it has some problems
Form fields compatibility
Zoom glitches
Better desktop browser compatibility
onScroll event
hash and hash change support (ie:
http://example.com/#element-id)
automatic refresh upon DOM change
Ok,
I solved the problem myself. Like the code which I posted in the question works well on all modern desktop browsers.
I used iScroll. The problem with iScroll was that it was not working properly with Firefox 3.6. So what I did is when I detect the browser as Firefox, I set the id of the wrapper of iScroll to "" (empty string). This causes the browser to use the earlier code.
This is how it got working in all desktop + mobile browsers.
Hope this helps to others,