Solved

Mobile site nav bar landscape problem

Posted on 2013-12-05
7
303 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

738 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