Need help with responsive CSS for web app



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.

Skills: CSS, HTML, Website Design

See more: www app mobile com, working permit, window graphics design, what is the best android phone, what is responsive web design, what i need to design css, what app want to design logo, what app can i use to design a logo, what android phone should i get, want help with a logo, user centered design, top best web design, top android tablets, the best layout responsive, speech on anything, site web responsive, safari for android, safari browser for android, responsive web design web, responsive web design best, responsive site html, responsive menu design, responsive app design, pure for android, pure android

Project ID: #4367945

Awarded to:


> Quick and Professional Responsive Designer here, available to start right away. Kindly check my message and reply in [Private Message].

$200 USD in 1 day
(47 Reviews)

8 freelancers are bidding on average $194 for this job


Hi, Consider its done! I would love to get this opportunity of working with you. I can guarantee complete satisfaction if you select me to execute this project. Please check your private message board. Thanks

$250 USD in 4 days
(18 Reviews)

Check inbox

$220 USD in 7 days
(5 Reviews)

Hello, i'm experienced frontend developer. I can fix all the issues you reported. Check PM

$150 USD in 3 days
(5 Reviews)

hello, i am an expert and professional developer, my reviews and completation rate will proov this to u, waiting to hear from u and if u r wise enough, u will find me in sky.p at keep.sense13 and in google m.aiI at ke More

$150 USD in 3 days
(0 Reviews)

I have 2+ CSS/Html xp. Do not hesitate to contact me.

$180 USD in 3 days
(0 Reviews)

puedo colaborar

$250 USD in 30 days
(0 Reviews)

Lets start...

$150 USD in 3 days
(0 Reviews)