Mobile site nav bar landscape problem

How do I fix the nav bar on mobile landscape orientation?
http://nsitedesigns.com/nsitedesigns/wrb/index.html

The dark tan extends into the full site content area.  That is not how it should be.  When you turn phone to portrait, the nav bar displays correctly.  Problem I run into is when I fix one, the other breaks.

http://nsitedesigns.com/nsitedesigns/wrb/style.css
http://nsitedesigns.com/nsitedesigns/wrb/css/screen_styles.css
http://nsitedesigns.com/nsitedesigns/wrb/css/screen_layout_small.css
http://nsitedesigns.com/nsitedesigns/wrb/css/screen_layout_medium.css
http://nsitedesigns.com/nsitedesigns/wrb/css/screen_layout_large.css
nsitedesignsAsked:
Who is Participating?
 
COBOLdinosaurConnect With a Mentor Commented:
In the media query:

<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px) and (orientation:landscape)"   href="css/screen_layout_small.css">

Open in new window

Or:
            
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px) and (orientation:landscape)"  href="css/screen_layout_medium.css">

Open in new window


Or it might need its own stylesheet:
<link rel="stylesheet" type="text/css" media="only screen and(orientation:landscape) href="css/screen_layout_landscape.css">

Open in new window


It all comes dow to how you have the CSS organized and what is the easiest way for you to work with it.

Cd&
0
 
nsitedesignsAuthor Commented:
p.s.  Not really sure if I need the http://nsitedesigns.com/nsitedesigns/wrb/style.css and http://nsitedesigns.com/nsitedesigns/wrb/css/screen_styles.css files.  I am new to designing for mulitple devices and think I may have more css files than what I need.
0
 
COBOLdinosaurCommented:
If you need to have CSS for landscape only, you can set use (orientation:landscape) in a media query to apply specific CSS for landscape only.  

Cd&
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
nsitedesignsAuthor Commented:
So, this is the item I need to modify for mobile landscape.

.nav_container {
      background-color:#EDEADD;/*light tan*/

}

Where do I put orientation:landscape?
0
 
nsitedesignsAuthor Commented:
I replaced this
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)"   href="css/screen_layout_small.css">


with this
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px) and (orientation:landscape)"   href="css/screen_layout_small.css">

And it really messed up my site.  The mobile version is now super narrow. The area in red should have text but now the text is all on the left side.

http://screencast.com/t/7ffStZBhDXN
0
 
nsitedesignsAuthor Commented:
I can't believe how difficult this is.  This is going on 3 weeks now that I have been working on this puppy. mobile site design sucks
0
 
COBOLdinosaurCommented:
Unfortunately, the state of the mobile technology, standards and tools are where desktop was 15 years ago, when we had to write everything more than once because no two environments were the same.

You might need to put the CSS that is specifically for landscape in its own stylesheet and then use:
<link rel="stylesheet" type="text/css" media="only screen and(orientation:landscape) href="css/screen_layout_landscape.css">

A lot of mobile development is still trial and error; and just when you think it is perfect, your client will go out an buy a new phone that does something "cool" that breaks the page.

Cd&
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.