#resultsZone { min-height: 49%; display: flex; align-items: flex-end; transition: 1s min-height; } #sim.noQuestionsLeft #resultsZone { min-height: 0; } @media (max-height: 350px) { /* Hack : at 350px of height, it's a mobile device and the keyboard is active */ #resultsZone { display: none; } } #results { width: 100%; padding: .4em 1.4em; } #resultsContent { position: relative; margin: 0 auto; padding: .3em 0 1em; min-height: 4em; width: 100%; max-width: 45em; background: #2975D1; color: white; box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.25); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } #results .edit { vertical-align: middle; border: none; font-size: 85%; color: white; width: 100%; text-align: center; } #results ul { font-size: 125%; width: 100%; list-style: none; padding-left: 0; display: flex; align-items: center; flex-wrap: wrap; margin: 0 auto; } #results li { margin: 0 1.2em; display: inline-block; width: 100%; }