Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Help on css for mobile browser

Posted on 2011-03-24
6
Medium Priority
?
278 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

688 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