@media (orientation: landscape) { .map { float: left; height: 600px; width: 50%; } #mapcontainer { display: inline-block; width: 80%; height: 80%; } #model { width: 35%; height: 250px; } .btn { width: 10%; height: 40px; } #image1 { width: 200px; height: 200px; } } @media (orientation: portrait) { .map { clear: left; height: 500px; width: 100%; } #mapcontainer { display: inline-block; width: 95%; height: 80%; } #model { width: 95%; } .btn { width: 20%; height: 40px; } #image1 { width: 100px; height: 100px; } } .map { margin: 0 auto; text-align: center; } .quiz { margin: 20px auto; text-align: center; } #WebGL-output { display: inline-block; } .stamp{ clear: left; } .ttl { text-align: center; } .question { margin: 10px 0 15px 0; font-size: large; } .btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; margin: 0 10px; padding: 0; border: solid 1px; outline: none; font-size: 15px; text-decoration: none; cursor: pointer; } #next { display: inline-block; } li { display: inline-block; width: 100%; } .choices { flex-wrap: wrap; width: 100%; margin: 0; padding-left: 0; } .item { list-style: none; margin: 5px; } #result { margin: 10px 0px; font-size: 20px; font-weight: bold; } .correct { color: red; font-size: 30px; font-weight: bold; } .incorrect { color: blue; font-size: 30px; font-weight: bold; } .commentary { font-size: 20px; } .none { display: none; margin: 10px; }