Computed Width different when responsive to mobile view

Question

I have a top logo in a div that I want to have a fixed position:

.rslogo {
 width: 1200px;
 position: fixed;
 top: 0px;
 left: 50%;
 margin-left: -600px;
 padding: 0px;
 z-index: 2;
}

I want the site to be responsive, so I add this css piece:

 @media (max-width: 1200px) {
 .rslogo {
   width: 100%;
   left: 50%;
   margin-left: -50%;
   position: fixed;
  }
 }

It works great when I manually reduce the width of the navigator screen in my desktop. BUT, when I switch to the mobile view, it doesn't work: the computed width for rslogo is still 1200px.

Just for information, I have the following line in my code:

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

If I change the position of rslogo to "absolute", it works fine, as the computed width is then 100%, but it's not what I want, as I prefer the div containing the logo to be fixed at the top of the window.

Any ideas? Thanks.

Could you show it in a jsfiddle as an example please so that we can check it out — Rahul S, Apr 19 '17 at 09:11
Probably a pixel ratio issue: http://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio — frenchie, Apr 19 '17 at 09:12
Did you tried giving this if you had added the logo as img tag img { max-width: 100%; } — Rahul S, Apr 19 '17 at 09:20
why are you using left:50% and margin-left:-50%? also provide a working snippet — Sahil Dhir, Apr 19 '17 at 09:20

Computed Width different when responsive to mobile view

0 Answers0