Solved

Help on css for mobile browser

Posted on 2011-03-24
6
272 Views
Last Modified: 2012-05-11
We have a clients site that renders across all browsers beautifully but we are having problems getting it to set the correct width for mobiles.  

We've created a mobile stylesheet that its calling okay, its hiding the right hand column etc. but its not setting the correct width. Ideally we'd like a fluid stylesheet that automatically adjusts the screen size for mobiles.

We've even tried

* {
 float:none !important;
 width:100% !important;
 }

which applies to everything but to no avail.

The site is here and our major objective is for it to render properly for iPhones (landscape and portrait) and Blackberrys.

Any assistance would be really appreciated. I've attached the main and handheld stylesheets for reference main.css handheld.css
0
Comment
Question by:yorkshireladdie
  • 3
  • 3
6 Comments
 
LVL 12

Expert Comment

by:Amick
ID: 35208162
Testing it locally it appears the main problem is that the navigation-bar presentation breaks and that there is a wider right-margin than one might expect when viewed in some browsers.  

Is that what you're concerned with?

Anything else?
0
 

Author Comment

by:yorkshireladdie
ID: 35208315
Hi Amick - when you view the site in a mobile browser it doesn't adjust automatically to the width of the device.

We need a fluid design that automatically adjust to the width of any mobile browser. As an example at the moment it is too wide for the iPhone

Many thanks

0
 
LVL 12

Accepted Solution

by:
Amick earned 500 total points
ID: 35209365
I've viewed it in IE mobile browser, Opera mobile 10,  and Blackbaud's iPhone emulator, iBBDemo2.

It is not perfect in any of them, but looks best in Opera.  In IE I'm getting a usable "3rd party mobilized" version of the desktop presentation. In the iPhone emulator I am getting the full desktop presentation, however if I zoom out far enough not to have to scroll around the fixed sized fonts become an issue as they overflow.  In Opera I am getting the imobile presentation.  This presentation is good with the exception of the navigation bar. Clicking still works, but the user can't easily see where they're going. The right margin is slightly wider than the left, but not an issue unless you're looking for perfection.

If the behavior of my iPhone emulator is correct, the main problems seem to stem from image size and fixed fonts.

One workaround is to detect what kind of device you're dealing with using a piece of code like this snippet being used at ESPN.com, then writing a specific iPage exactly as you like it.

<script type="text/javascript">
	(function(){var c=navigator.userAgent,a=window.location,d=document.cookie,b=a.href;if(c.match(/iP(od|hone)/i)||(c.match(/Android/i)&&c.match(/Mobile/i)))if(d.indexOf("iphone_redirect=false")<0)a.href="http://m.espn.go.com/wireless/?i=COMR";if(c.match(/iPad/i))if(d.indexOf("iphone_redirect=false")<0)a.href="http://m.espn.go.com/wireless/choose";else if(b.indexOf("ipad")==-1){b+=b.indexOf("?")>-1?"&ipad":"?ipad";a.href=b}})();
</script>

Open in new window

0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 12

Expert Comment

by:Amick
ID: 35209398
Forgive the imobile typo above.  Apparently reading too much Apple iLiterature can make one start thinking in iWords.
0
 

Author Comment

by:yorkshireladdie
ID: 35210207
Many thanks for your constructive comments Amick, they are very much appreciated.

We'll have a look at your suggestions and come back to you.

Thanks again for your help

Kind Regards

Mike
0
 

Author Comment

by:yorkshireladdie
ID: 35213092
Just to update, unrelated to the above replies, I've made an adjustment to the CSS, we had a defined width to an element that I've now commented out and its resolved the problem. I will be returning to the board later today to award points. Many thanks
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Host asp.net pages 5 34
I can't get this footer to "stick" to the bottom! Why not? 4 29
css issues with IE 11 8 34
ebay style="image-orientation: 90deg;" 2 36
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

776 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