* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } html { font-family: sans-serif; } /** * Com que el contenidor principal que contindrà tots els altres elements del joc, vull que estigui centrat, * vertical i horitzontalment, al ser un element de block (div), he de posar-lo absolute respecte el seu pare, * en aquest cas , que per defecte és static. Tot seguit ho centro amb top i left i corregeixo el * desplaçament de la meitat de la seva pròpia mida amb translate(-50%, -50%); */ div.main_container { border: solid 1px #aaa; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } div.scaffold_container { width: 67%; height: 80%; padding: 1%; float: left; text-align: center; } div.scaffold_container .monster { height: 100%; } div.buttons_container { width: 33%; height: 80%; padding: 1%; float: left; display: flex; flex-direction: column; } .button { font-weight: 900; color: #fff; border-radius: 5px; width: 90%; margin: 5% auto; text-align: center; position: relative; } .button span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-transform: uppercase; } .new_game { background-color: #50A7C2; height: 17%; cursor: pointer; } .clue { background-color: #ec8c69; height: 35%; cursor: pointer; } .lives { background-color: #84ce8e; height: 35%; } div.letters_container { width: 100%; height: 20%; padding: 1%; float: left; position: relative; overflow: auto; } div.letters_container span { font-size: 10vh; font-family: monospace; letter-spacing: 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .info { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color:rgba(0, 0, 0, 0.4); width: 100%; height: 100%; z-index: 10; } .info * { font-family: monospace; } .info > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 70%; background-color: #5cb85c; border-radius: 5px; } .info > div > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; text-align: center; color: #ffffff; font-size: 5vh; } .info_msg { display: none; } .btn { border: none; padding: 14px 28px; cursor: pointer; border-radius: 5px; background-color: #ff9800; display: block; color: #ffffff; font-size: 5vh; margin: 5vh auto 0 auto; } .btn:hover {background: #e68a00;} /** * Com que vull que el contenidor principal sigui el 90% de la mida més petit de pantalla per no crear scroll, * si la pantalla està en horitzontal (landscape), la mida més petita és la vertical (height), per això ho * calculo tot en vh i faig que l'alçada sigui igual que l'amplada. De forma anàloga ho faig quan la * pantalla està en vertical (portrait), però ara utilitzo les mides relatives al viewport vw. */ @media only screen and (orientation: landscape) { div.main_container { width: 90vh; height: 90vh; } .button { font-size: 3vh; line-height: 3vh; } .new_game:hover { font-size: 4vh; line-height: 4vh; } .clue { font-size: 20vh; line-height: 20vh; } } @media only screen and (orientation: portrait) { div.main_container { width: 90vw; height: 90vw; } .button { font-size: 3vw; line-height: 3vw; } .new_game:hover { font-size: 4vw; line-height: 4vw; } .clue { font-size: 20vw; line-height: 20vw; } div.letters_container span { font-size: 10vw; } .info > div > span { font-size: 5vw; } }