Need help with responsive CSS for web app

This project was awarded to webworldsolz for $200 USD.

Get free quotes for a project like this
Project Budget
$30 - $250 USD
Total Bids
Project Description

I started CSS/HTML layout for a site we are working on, but I'm having difficulty getting it to do what I need. What I have started so far is up at [url removed, login to view] so please use that as a starting point and help me finish the work.

We're still working on the actual graphics so it doesn't matter now that graphics are incomplete, I'm only trying to get responsive CSS/HTML positioning working as part of this project. Attached are mock-up JPEGs showing what I want the site to do based on the screen size and orientation.

The page should be responsive and automatically adjust from portrait to landscape on mobile devices. Elements should reposition themselves to make best use of available space. User shouldn't have to scroll to see anything on any device. The lowest browser I care to support is IE8 and we can assume a default landscape view for IE8, newer browsers and mobile devices should utilize CSS3 media queries.

-The background should cover the screen (already does with background-size: cover;)

-The Bot should be centered horizontally and feet stuck to bottom of window (does this now already)

-Speech bubble should appear to left of bot without throwing bot off center if possible. If there is not enough space, bot can be pushed off center to make it fit.

-If space permits speech bubble should be diagonally up and left of bot. If space does not permit, it can be just left of bot.

-User input box should be above bot (in case on screen keyboard pops up, face should be visible to user still instead of feet)

-Default logo location is top left and login menu location is top right. These can be moved pretty much anywhere else if needed to make use of available space.

-When page loads up on an iphone/ipad or most android phone/tablets the default view should fill the screen and not require the user to scroll or pinch zoom in or out to see anything. Should nicely reposition itself if device orientation is changed.

-Would like most of this implemented in HTML/CSS3 media queries. Fallback mode for IE8. Javascript/Jquery ok if required but would prefer pure CSS if possible.

In order for me to consider it complete I will test it on ipod, ipad, galaxy s2 phone, IE8, IE9, IE10, latest Chrome/Firefox/Safari/Opera.

Awarded to:
Skills Required

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online