I've read through a bunch of topics here on stackoverflow to fix this problem and did not find any way to fix it just by yet.

Thats what I got:

I got a webtemplate using Bootstrap 3. Included is the following META-Tag:

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

```

Included as well are the following CSS files:

```
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/gamebooster.css">

```

When I now use some of the xs classes of bootstrap everything seems to work fine. What I now want to do is add a padding to specific boxes and change the height of a logo only if the user is using a mobile device.

Thats why I've tried the following piece of code:

```
@media (max-width: 767px) {
.navbar .navbar-brand img {
    width: 50px !important;
} }

```

It seems to work just fine if I shrink my browser window, but when I try it out on my mobile it does not work at all. The curious part about this is: I'm using the exact same media query as bootstrap is, and it seems to work. What am I doing wrong?

Thanks,
Fabian