0

I am having a very little problem, it is stoping me from finishing a task in my project but I think it is easy to solve, I just need some help, so here is my problem, I use that simple code to see my window width in responsive mode : 

alert(window.innerWidth)

I get the right value when I resize my browser, but when I choosed Galaxy 5 ( proposed by Ghrome ) to see the results, I get a weird value, I think I know from where it is coming from but I am not sure, as You can see in the picture, I was waiting to see ( 411 ) in my alert, instead I get a higher value ( 972 ??? ) :

enter image description here

I have a big container in my page that has some css like this : 

.container {
   min-width: 972px; 
}

So I thought that this may be the problem, so I added this code : 

$extra-small: "max-width:599px";
.container {
   min-width: 972px;
   @media($extra-small){
       min-width: 0px;
   } 
}

But I still get the same problem, because now my container has not a min width of 972 px, I can see that when I inspect my elements :

enter image description here

So what should I do to fix that bug, any help would be much appreciated.

TaouBen
  • 1,165
  • 1
  • 15
  • 41

1 Answers1

1

Have a look at What is the difference between window.innerWidth and screen.width?

Looks like screen.width should do what you want.

MikeB
  • 580
  • 3
  • 18
  • Well, I have tried this to be honnest, I am using ReactJS to do that, when I use ( scree.width ) code, I get an error, telling me that screen is not defined .. – TaouBen May 06 '19 at 16:52
  • 1
    So, we have a context issue - if you can trace why `screen` isn't defined, you'll probably also find the source of your original problem! – MikeB May 06 '19 at 16:54