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 the right. When the screen is narrower, we rearrange the recipe from the right to the bottom. Putting the recipe section right below the game creates more game space for the player to play. When the game is displayed on a small mobile screen, we further...
