Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Help on css for mobile browser

Posted on 2011-03-24
6
Medium Priority
?
279 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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 add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

972 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