HTML and CSS Reference
In-Depth Information
float: left;
padding: 10px;
overflow: auto;
}
/* individual ingredient inside the ingredients section*/
.ingredient {
width: 33%;
height: 33%;
background: #D8D8D8;
border: 1px solid #979797;
float: left;
}
/* phone button after the individual ingredient*/
#phone {
width: 100%;
height: 20%;
background: #D8D8D8;
float: left;
}
3. The ingredients butons and the sushi board is laid towards the let and right
respecively. Each of these occupies 50 percent of space in the wide screen
view. When the screen is less than 501 pixels, we change the raio to make
the ingredients butons' width to 70 percent. This makes it easier to select
the butons in a small screen view:
/* mobile portrait view */
@media screen and (max-width: 500px) {
#ingredients {
width: 70%;
}
#sushi-board {
width: 30%;
}
}
4. The screen space will be too small to display all the game elements when they
are displayed on a mobile device in landscape orientaion. In the following media
query code that applies rules to a landscape mobile screen, we further squeeze
the height of the interface and put the money status bar to the top-left corner:
/* mobile landscape view */
@media screen and (max-device-width: 550px) and (orientation :
landscape) {
