CODEWITHSUNDEEP
cssfirefoxresponsive-designmedia-queriesresponsive
tklodd
tklodd

Reputation: 1079

How to use Firefox responsive design mode for media queries

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.

Upvotes: 1

Views: 917

Answers (3)

sachin bisht
sachin bisht

Reputation: 1

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.

Upvotes: 0

user6690322
user6690322

Reputation:

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*/
}

Upvotes: 0

tklodd
tklodd

Reputation: 1079

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.

Upvotes: 1

Related Questions