Solved

Help on css for mobile browser

Posted on 2011-03-24
6
268 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

706 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