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.
Looking to make some money?
- Set your budget and the time frame
- Outline your proposal
- Get paid for your work
Bids on this Project
Ho Chi Minh City, Vietnam
Waqasdeveloperz is a professional custom online graphic design company that knows how best to serve our customers when it comes to design logos be it company, website business etc. Our unique creative graphic design services include logo design, website logo design, website design, stationery design, banner design, brochure design and much more.
I deliver only exceptionally robust and well-designed work as a rule. Furthermore, you should know that as a principle I do not finish my work until I believe it is of the most professional quality I am able to create. My skills encompass Native iOS , Android, and Black Berry mobile development, Python or Ruby web programming, and, in addition, Xamarin iOS / Android development. I possess deep technological expertise regarding Optical Character Recognition, Augmented , OpenCV, XMPP, and OpenTok. You will find me easy to communicate with to an extent by which you may be surprised, but that is because I believe only a dedicated connection with my employer can lead to truly extraordinary creations.
Ho Chi Minh, Vietnam
Glink Solutions, which full name is Glink Solution Technology, is an official established IT company that provide global IT solutions. Developing from its precursor, NQS company, that manage and working on the best outsourcing and freelancer website FREELANCER.COM with the account ID Isunsoft since 2012. Noticably, just with 3 operating years, Isunsoft achieved significant successful and high reputation from the site, with many good feedback in providing outsourcing services to customers all around the world. Taking the advantages of domestic labor, which are young, dynamic and skillful, Glink provides multiple IT services such as: Web design and development, E-commerce solutions, ERP software, mobile applications and cloud computing…to the variety of customers. On its expanding plan, Glink adopts its own Corporate Identity, with the clear visions and missions, to provide better services to domestic and international customers.
I love to work: => Responsive theme development using bootstrap 3 (Very latest version) => Module development using jquery/html5. => Payment API integration. => Shipping API integration. => Price matrix.Dynamic price calculator module. => Custom user design tools using html5. => BFS/DFS algorithm based module development.(using C Language) => Fixing Bug