Need help with responsive CSS for web app

IN PROGRESS
Bids
8
Avg Bid (USD)
$194
Project Budget (USD)
$30 - $250

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 www.girl-bot.com/test3.html 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.

Skills required:
CSS, HTML, Website Design
About the employer:
Verified
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.


$ 250
in 4 days
$ 200
in 1 days
$ 220
in 7 days
Hire sdollar
$ 150
in 3 days
Hire exprtsolution
$ 150
in 3 days
Hire shcomin
$ 180
in 3 days
$ 250
in 30 days
Hire Junaidbajwa760
$ 150
in 3 days