CODEWITHSUNDEEP
htmlcssbrowserresponsive-designresolution
MrKayako
MrKayako

Reputation: 1

Responsive Design Mode vs Resizing browser window

I am trying to change things depending on resolution. So I use for exemple:

    @mediaquery only screen and (min-width:1125px) and (max-width:1280px) {
      flex-basis: 31.4rem;
    }

It works perfectly in the responsive design mode of Mozilla Firefox, but when I am resizing the browser window directly it changes only from 1262px instead of 1280px and so between 1263px and 1280px it does not change. It actually does that for any media query (instead of 560px like in responsive mode it changes only from 540px for example).

Any idea where it could originate from ? How do I unify values from browser resizing and Responsive design mode ?

Upvotes: 0

Views: 533

Answers (1)

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

When you are testing the page with any responsive tool it's not counting the vertical scrollbar of the page. But when you actually resize the browser, it will give around 20px width difference, which is because of browser's default scrollbar width.

Upvotes: 1

Related Questions