Web Design Forum: Eskymo - Viewing Profile - Web Design Forum

I'm having problems viewing the responsive site I'm building at the moment on the opera mini browser on my iPad and my iPod touch. the iPad version of the browser doesn't pick up my media queries and doesn't pick up the 768px style sheet when in portrait mode, but this might be something to do with my media queries.

when on the iPod it doesn't pick up my CSS styling for my navigation and all links seem to get combined into one - does opera not support webkit stuff?

is there a way to specifically target opera with media queries so I can just serve the default CSS for it?

are there any online resources that outline specific things to consider when building sites to work in opera mini?

I'm wondering if it's possible to convert this menu into two columns. My css code is:

#navigation-area {
    width: 94%;
	margin: 0 auto;
	padding: 20px 0px 0px 0px;
}

#nav li {
	list-style-type: none;
	padding-right: 10px;
	font-weight:bold;
	font-size: 0.75em; /* 12px/16px */
	color: 141D5A;
}
#nav li.last {padding: 0px;}

#nav li a:link, #nav li a:visited { color: #141D5A; text-decoration: none; }
#nav li a:hover, #nav li a:active { color: #F29400; text-decoration: underline; }

and my html:

<div id="navigation-area">
	<ul id="nav">
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li><a href="#">List item</a></li>
		<li class="last"><a href="#">List item</a></li>
	</ul>
</div> <!-- END navigation-area -->

I'd bascially want to overide these styles with a media query for small screens so that I get a neat 2 column menu on mobile devices that I can style with background coloured boxes rather than an inline list. Very much like the menu you get on this site when viewing on a small screen:

http://thebritishvoiceoverguy.com/

I've looked at the source code and can't figure it out.

I've never done any multi column css - any ideas?

I've just tried to implement this tutorial I found the CSS-Tricks website in the site I'm working on at the moment to change my normal list menu into a dropdown when the site is viewed on small screens - I'm testing on my iPod touch as I don't have an iPhone and I have two main problems:

1. when I click on the drop down menu - the page zooms in - I don't want this to happen and I don't know why it is.
2. the links in the drop down do nothing - they don't link anywhere even though a link is specified - why don't they work?

This is my code:

<div id="navigation-area">
	<ul id="nav">
		<li><a href="http://www.google.com">About</a></li>
		<li><a href="http://www.google.com">Locations</a></li>
		<li><a href="http://www.google.com">Products</a></li>
		<li><a href="http://www.google.com">Development</a></li>
		<li><a href="http://www.google.com">Partnering</a></li>
		<li><a href="http://www.google.com">Community Involvement</a></li>
		<li><a href="http://www.google.com">Careers</a></li>
		<li><a href="http://www.google.com">Media Centre</a></li>
		<li class="last"><a href="http://www.google.com">Contact</a></li>
	</ul> 
			
	<select>
		<option value="">Select</option>
				
		<option value="http://www.google.com">About</option>
		<option value="http://www.google.com">Locations</option>
		<option value="http://www.google.com">Products</option>
		<option value="http://www.google.com">Development</option>
		<option value="http://www.google.com">Partnering</option>
		<option value="http://www.google.com">Community Involvement</option>
		<option value="http://www.google.com">Careers</option>
		<option value="http://www.google.com">Media Centre</option>
		<option value="http://www.google.com">Contact</option>
	</select> 
</div> <!-- END navigation-area -->

I did originally have '#' in place for all the links, but substituted these for links to Google for now so there was actually somewhere for the links to take you so I could test it works - it doesn't - and I'm not sure what I'm doing wrong.

I've got this in my main CSS file:

#navigation-area {
    width: 94%;
    margin: 0 auto;
    padding: 20px 0px 0px 0px;
}

#nav li {
	display: inline;
	list-style-type: none;
	padding-right: 10px;
	font-weight:bold;
	font-size: 0.75em; /* 12px/16px */
	color: 141D5A;
}
#nav li.last {padding: 0px;}

#nav li a:link, #nav li a:visited { color: #141D5A; text-decoration: none; }
#nav li a:hover, #nav li a:active { color: #F29400; text-decoration: underline; }

#navigation-area select {
  display: none;
}

and this is my CSS file for small screens:

#navigation-area {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0px 0px 0px;
}

#navigation-area li     { display: none; }
#navigation-area select { display: inline-block; }

and when I view the site on the small screen the drop down menu does appear just fine. When I click on it - for some reason the whole page zooms in - not sure why this happens - and when I select a link and click 'done' I get taken nowhere and I also have to 'pinch' the screen to get it back to the normal size.

Any ideas?
Have I missed something fundamental?

Can someone help me out here - doesn't matter how much I read about Media Queries I still can't get my head around what to use in my stylesheets - especially the widths. I want my site layout to change according to the screen width using max and min dimensions set in the stylesheet - but maybe I've got the dimensions for iPad incorrect - I thought that in landscape mode it was 1024px and so would use my default stylesheet - it does but for some reason the site doesn't fit on screen!!!

I'm developing a site that is 960px wide - so I have a default stylesheet for this and I've gone through it and turned all the necessary px values to percentages. I've then created a stylesheet for 768px views (e.g. iPad in portrait mode) and will get round to doing a couple more for iPhone portrait and landscape modes. The client is keen for the site to work on iPad and iPhones and so I'm tackling these first.

When I view the test page on the iPad - in landscape mode - it loads the default stylesheet, but the site doesn't fit on the screen and I have to scroll left and right to see it all, or pinch it to get it to fit on screen - I thought that a 960px layout would be OK for iPad landscpape mode. What am I doing wrong? I've got this in my head tag:

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

Is that right?

When I turn the iPad to portrait the 768px stylesheet loads OK - I know this as I've changed the background colour on the body tag - but for some reason a white gap appears to the right of the design - this doesn't happen if I resize the page in the desktop browser. Does anyone know why this is happening?

Test page is here

this is the media query I have in my 768 stylesheet:

@media only screen
and (min-width : 768px)
and (max-width : 1023px) { ... }

but I'm not sure if this is correct as in portrait the iPad is 768px - so not sure why I'd want maximum width set to 1023px.

someone help me please - I'm really confused....

I'm just starting a new web project that needs to work on ipads and iphones as well as desktop browsers so I'm thinking of going down the RWD route to avoid having to build a separate mobile website and get my head around media queries instead. So I've read 'Responsive Web Design' by Ethan Marcotte and looking into Grid systems, but really don't fancy the complexity of a lot of the grid systems available as I don't need so much of the elements provided by these systems and I also find them so confusing. I don't think the book really explains the basics of using grids or the available grid systems out there - it just presumes you know what they are and how to use them which I found really annoying about the book.

I've been thinking of just creating my own framework to work from as the site isn't complicated, it's just large (as in 50+ pages) and I need it to start off as a three column website and scale down to two columns and then one column depending on the device being used, but also need a little help to get going so been looking around for simplified no nonsense grids. Today I came across StackLayout and thinking of giving it a go - it's not a grid system as such, but I like the way it works and the site provides lots of examples to get me started.

http://stacklayout.com/

Has anyone use it before?