Styjun

Should the average user with no special access rights be worried about SMS-based 2FA being theoretically interceptable?

Is there any iPhone SE out there with 3D Touch?

Aesthetic proofs that involve Field Theory / Galois Theory

List of 1000 most common words across all languages

Symbol for function composition like a big sum

Why are there two fundamental laws of logic?

Comma Code - Automate the Boring Stuff with Python

How do pilots align the HUD with their eyeballs?

Golf (6-card) Golf!

Can anyone put a name to this Circle of Fifths observation?

Strange Sticky Substance on Digital Camera

Should we use wheatstone bridges nowadays?

Designing a time thief proof safe

Lost Update Understanding

Under what circumstances would RAM locations 0 and 1 be written and/or read on the C64?

Why does NASA publish all the results/data it gets?

My manager quit. Should I agree to defer wage increase to accommodate budget concerns?

Is it more effective to add yeast before or after kneading?

How to justify a team increase when the team is doing good?

Proper way to shut down consumer

Can an integer optimization problem be convex?

1, 2, 4, 8, 16, ... 33?

How to see the previous "Accessed" date in Windows

What are the consequences of high orphan block rate?

CSS Max-Width Media Query Unexpected Behavior

CSS media queries: max-width OR max-heightCSS media queries min-width/max-width not being calledMedia queries not relating to pixels on websiteCSS media queries for Samsung s6after adding Max-Width media query, the background image won't disappearHTML/CSS: @media for exact screen sizeMedia query when max-width is set to 767pxWhy is `max-width` exclusive sometimes?min-width media query always fires while max-width query never firesCSS Media Query Validation

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I have used max-width and min-width media queries to make my site responsive without any problems for years. But today I noticed an odd behavior: the max-width rule stopped working for the screen width in the limit. For example If I'm changing color to blue at 899px, it only starts changing it at 898 px.

I'm not sure where the problem is, I tested in multiple browsers, local and production and the result is the same. I even made a code pen and the max-width value keeps getting ignored: https://codepen.io/anon/pen/LzWWqd

body background-color: yellow; 

@media only screen and (max-width: 899px) 
 body background-color: blue; 

The result of that CSS is that the screen is yellow at 899px, where it shouldn't be, it should be blue.

Could this be related to my screen resolution? The only thing I changed was my computer screen. I'm using Windows 10 in a 1440p screen. Before I had windows 10 in a 1080p screen.

css

share|improve this question

asked Mar 28 at 17:40

DavidDavid

2944 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  See if the change in hardware caused Windows to change your display scaling settings to compensate. (Unlikely, but worth a look anyway. You'll find scaling settings in the same place as resolution.)
  
  – BoltClock♦
  Mar 28 at 18:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @BoltClock Yes! That was the problem. I changed Windows 10 scaling back to 100% and now the Media Query works as expected... Weird that windows scaling produces this kinds of problem and I couldn't find any info about this. Thank you!
  
  – David
  Mar 28 at 18:52
  

  
  
  
  

add a comment
 | 

0

I have used max-width and min-width media queries to make my site responsive without any problems for years. But today I noticed an odd behavior: the max-width rule stopped working for the screen width in the limit. For example If I'm changing color to blue at 899px, it only starts changing it at 898 px.

I'm not sure where the problem is, I tested in multiple browsers, local and production and the result is the same. I even made a code pen and the max-width value keeps getting ignored: https://codepen.io/anon/pen/LzWWqd

body background-color: yellow; 

@media only screen and (max-width: 899px) 
 body background-color: blue; 

The result of that CSS is that the screen is yellow at 899px, where it shouldn't be, it should be blue.

Could this be related to my screen resolution? The only thing I changed was my computer screen. I'm using Windows 10 in a 1440p screen. Before I had windows 10 in a 1080p screen.

css

share|improve this question

asked Mar 28 at 17:40

DavidDavid

2944 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  See if the change in hardware caused Windows to change your display scaling settings to compensate. (Unlikely, but worth a look anyway. You'll find scaling settings in the same place as resolution.)
  
  – BoltClock♦
  Mar 28 at 18:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @BoltClock Yes! That was the problem. I changed Windows 10 scaling back to 100% and now the Media Query works as expected... Weird that windows scaling produces this kinds of problem and I couldn't find any info about this. Thank you!
  
  – David
  Mar 28 at 18:52
  

  
  
  
  

add a comment
 | 

I have used max-width and min-width media queries to make my site responsive without any problems for years. But today I noticed an odd behavior: the max-width rule stopped working for the screen width in the limit. For example If I'm changing color to blue at 899px, it only starts changing it at 898 px.

I'm not sure where the problem is, I tested in multiple browsers, local and production and the result is the same. I even made a code pen and the max-width value keeps getting ignored: https://codepen.io/anon/pen/LzWWqd

body background-color: yellow; 

@media only screen and (max-width: 899px) 
 body background-color: blue; 

The result of that CSS is that the screen is yellow at 899px, where it shouldn't be, it should be blue.

Could this be related to my screen resolution? The only thing I changed was my computer screen. I'm using Windows 10 in a 1440p screen. Before I had windows 10 in a 1080p screen.

css

share|improve this question

asked Mar 28 at 17:40

DavidDavid

2944 bronze badges

body background-color: yellow; 

@media only screen and (max-width: 899px) 
 body background-color: blue; 

share|improve this question

asked Mar 28 at 17:40

DavidDavid

2944 bronze badges

share|improve this question

asked Mar 28 at 17:40

DavidDavid

2944 bronze badges

asked Mar 28 at 17:40

DavidDavid

2944 bronze badges

asked Mar 28 at 17:40

DavidDavid

2944 bronze badges