O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Making the responsive layout

We are going to create the skeleton of the layout in this task that will fit into different screen sizes.

Prepare for lift off

The majority of the layout changes come in three screen sizes. They are narrow screen, medium screen, and wide screen. As illustrated in the following figure, the screen includes the customer view, cash indicator, ingredients, refilling button, sushi boards, and recipe. The following layout is for a wide screen where the main game view is to the left and the static recipes section is to the right. When the screen is narrower than this, we put the static recipes at the bottom to make more space for the game.

When the screen is large enough, we put the game on the left-hand side and the recipe to ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required