Solved

Mobile site nav bar landscape problem

Posted on 2013-12-05
7
286 Views
Last Modified: 2013-12-06
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
0
Comment
Question by:nsitedesigns
  • 4
  • 3
7 Comments
 

Author Comment

by:nsitedesigns
ID: 39698705
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39698881
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
 

Author Comment

by:nsitedesigns
ID: 39698957
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39699047
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
 

Author Comment

by:nsitedesigns
ID: 39699146
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
 

Author Comment

by:nsitedesigns
ID: 39699177
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39699313
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

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This video teaches users how to migrate an existing Wordpress website to a new domain.

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now