Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Help on css for mobile browser

Posted on 2011-03-24
6
Medium Priority
?
280 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 2000 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
Industry Leaders: 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!

 
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

Technology Partners: 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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…
Suggested Courses
Course of the Month15 days, 15 hours left to enroll

580 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