html - Media Queries not working on mobile when in second file -


i've read through bunch of topics here on stackoverflow fix problem , did not find way fix yet.

thats got:

i got webtemplate using bootstrap 3. included following meta-tag:

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

included 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 use of xs classes of bootstrap seems work fine. want add padding specific boxes , change height of logo if user using mobile device.

thats why i've tried following piece of code:

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

it seems work fine if shrink browser window, when try out on mobile not work @ all. curious part is: i'm using exact same media query bootstrap is, , seems work. doing wrong?

thanks, fabian

try this:

@media screen , (max-width: 767px) {     -----  } 

and dont forget use following meta tag:

<meta name="handheldfriendly" content="true" /> <meta name="mobileoptimized" content="320" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> 

Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -