
previous

page 38
next
portrait mode
Just for fun, I decided to see how hard it would be to change to a layout suitable for portrait mode. I learnt a lot about flex in the process.
This is what I ended up with at the bottom of my styles.css file:
@media (orientation:portrait) {
body {
background-color:mediumseagreen;
}
#game {
flex-wrap:wrap;
justify-content: space-between;
}
#temp_panel, #final_panel {
flex-direction: row;
width:48.3vw;
}
.button {
margin:1vw
}
.temp, .final {
width:18%;
margin:.7vw;
}
#temp_panel {
order:1;
}
#final_panel {
order:2;
}
#main_panel {
order:3;
width:98vw;
}
}
body {
background-color:mediumseagreen;
}
#game {
flex-wrap:wrap;
justify-content: space-between;
}
#temp_panel, #final_panel {
flex-direction: row;
width:48.3vw;
}
.button {
margin:1vw
}
.temp, .final {
width:18%;
margin:.7vw;
}
#temp_panel {
order:1;
}
#final_panel {
order:2;
}
#main_panel {
order:3;
width:98vw;
}
}
previous
next