Solved

Mobile site nav bar landscape problem

Posted on 2013-12-05
7
294 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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

830 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