In Progress

HTML & CSS & Javascript mobile-friendly single web page

There are two areas in this one page.

One area is A, another is B. The size and layout of A and B depends on the size of the window, as area B has 4 buttons with dynamic size.

The 4 buttons in the area B with 2x2 layout. They have a minimum height and width in pixel, and minimum margin in pixel regardless of the size of window. These two restrictions define the minimum size of area B (height: Bh_min, width: Bw_min, with button height Buh_min, Buw_min).

Here's how the layout and size of A and B is determined. Say the window size is Wh in height and Ww in width.

If Wh>2*Bh_min and Ww>=Bw_min: resize the buttons inside B proportionally in both width, height and margin by up to Ww/Bw_min, in the pre-condition that area B must not occupy more than half of Wh, and stays at the bottom of the window. Area A takes the above.

ElseIf Ww>2*Bw_min and Wh>=Bh_min: resize the buttons inside B proportionally in both width and height and margin by up to Wh/Bh_min, in the pre-condition that area B must not occupy more than half of Ww, and stays at the right side of the window. Area A takes the left side.

ElseIf Wh>=Ww, area B with minimum size stays on the bottom, and A on the top.

Else area B with minimum size stays on the right, and A on the left.

The layout should adjust according to the rules above when resizing, mobile device rotating.

Need to test with Android and iOS devices, as well as mainstream browsers (Firefox, Chrome) on desktop computers.

For the 4 cases, for case 1 and 3 the layout is like "layout - vertical"; case 2 and 4 is "layout - horizontal". They are only for demo purpose, and details should rely on the rules in the description.

No background, color or image is needed. The critical part is the layout adjustment based on the size (orientation) of the window.

Skills: CSS, HTML5, Javascript

See more: ios browsers, firefox android, define ios, define android, chrome ios, android firefox, javascript on android, define determined, single web page, pixel web, more mobile friendly, html/css/javascript, html+css+javascript, html css javascript, html and javascript, chrome javascript, html page resize, web page size, web resize, android mobile css, half html, mobile css size, html resizing, page resize html, web mobile friendly

About the Employer:
( 0 reviews ) Sunnyvale, United States

Project ID: #4862196

7 freelancers are bidding on average $42 for this job

salientcomputer

HI Please see PMB.

$54 USD in 1 day
(140 Reviews)
6.1
sunsoftpro

I am ready to discuss and perform your job. Hope to get your message soon. Thanks!

$50 USD in 1 day
(48 Reviews)
5.4
waqasdeveloperz

Hi sir i am ready to start right now. Thanks.

$34 USD in 1 day
(61 Reviews)
5.2
zhengnami13

Hi, sir. I can do this well. thanks

$43 USD in 1 day
(7 Reviews)
4.2
topworkerbd

Sir I work in html,css (Div and table,Grid base design,responsive)and also work in php,mysql,opencart,prestashop,zen cart,magento,wordpress and codeigniter and jquery have a more than 3 years of experience in this f More

$30 USD in 3 days
(11 Reviews)
3.4
grtiwari

I have 10+ years exp as web designer. Please check PMB for further detail. Thanks

$55 USD in 2 days
(1 Review)
1.0
MinhHoangAnh

you can trust me.

$30 USD in 3 days
(0 Reviews)
0.0