Solved

Mobile site nav bar landscape problem

Posted on 2013-12-05
7
263 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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
archiving old posts 9 24
SQL Injected data? 8 83
Error viewing ASP page 12 82
razorCMS: Change Menu Font 4 24
This article discusses four methods for overlaying images in a container on a web page
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

708 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

17 Experts available now in Live!

Get 1:1 Help Now