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
Post a Comment