issue with CSS media queries(scrollbar)

Question

I am having problem with css media query in Firefox. It works correct in Chrome like I made two DIVs and want a scrollbar. If I decrease the screen size of firefox upto 800p

Answer 1

You can implement a solution for Firefox pretty easily by using a CSS-hack. After wrapping your content in an extra <div> add this lines to your CSS:

/* Firefox-Hack */
body,  x:-moz-any-link {
    overflow-x: hidden;
}
#wrapper,  x:-moz-any-link {
    margin: 0 -7.5px;
}

Check the jsbin (jsfiddle is down right now)

To have richer responsive experience you could add another media query: another jsbin

The CSS-hack was found at paulirish.com