HTML and CSS Reference
Making the responsive layout
We are going to create the skeleton of the layout in this task that will fit into different
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, reilling buton, sushi boards, and recipe.
The following layout is for a wide screen where the main game view is to the left and the
staic recipes secion is to the right. When the screen is narrower than this, we put the
staic recipes at the botom 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 botom.
Puing the recipe secion 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 downscale the game
and squeeze the customer view. In CSS, it is known as media queries. Media queries apply
rules based on media properies such as the width of the screen and its height.