Override device-width

Question

I'm working on a website and I'm trying to make it mobile friendly by including <meta name="viewport" content="width=device-width"> in my html.

Unfortunately I have an element that needs to be larger then the device width. I was going to use media queries to hard code values for this element on different screen sizes but it seems like I am not able to override the elements width.

This is the element whose width I want to override:

<div id="menu_bar">

Currently the only way I can override this elements width is by doing:

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

However if I do:

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

it does not work. Even adding !important does not work. I need to be able to do it the second way because I need to use media queries.

Just for reference I have the menu bar as a ruby on rails partial because on every page of my website.

Any idea how to override the width of the menu bar so I can use media queries?

Any help is greatly appreciated.

Answer 1

Try going to http://atmedia.info/ -- it will scan your device (refresh to rescan it in portrait and in landscape) - it tells you a bit about media queries that match your device. Assuming you have not already solved your stuff yet.

This meta tag combo seems to help me.. and I use media queries to match devices in min-width and min-height (max as well)

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