html - Override device-width -

i'm working on website , i'm trying make mobile friendly including <meta name="viewport" content="width=device-width"> in html.

unfortunately have element needs larger device width. going use media queries hard code values element on different screen sizes seems not able override elements width.

this element width want override:

<div id="menu_bar">

currently way can override elements width doing:

<div id="menu_bar" style=" width: 1024px;">

however if do:

<style>     #menu_bar {width : 1024px;} </style> <div id="menu_bar"> 

it not work. adding !important not work. need able second way because need use media queries.

just reference have menu bar ruby on rails partial because on every page of website.

any idea how override width of menu bar can use media queries?

any appreciated.

try going http://atmedia.info/ -- scan device (refresh rescan in portrait , in landscape) - tells bit media queries match device. assuming have not solved stuff yet.

this meta tag combo seems me.. , use media queries match devices in min-width , min-height (max well)

    <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="mobileoptimized" value="0" />