#headsUp { visibility: hidden; transition: height .3s; background-color: #454752; box-shadow: 0 1px 6px 1px hsla(0, 0%, 0%, 0.4); z-index: 3; margin-top: 55px; position: relative; } .welcome { position: absolute; bottom: 4.5rem; padding-left: 2.5%; } .removeOptions { width: 100%; position: absolute; bottom: 1rem; padding-left: 2.5%; } .hideHeadsUp { height: 3rem; } .removeHeadsUp { cursor: pointer; display: inline-block; margin-left: 1rem; border-bottom: white 3px dotted; } * { box-sizing: border-box; } body { background-color: #212126!important; } button { border: 0; padding: 0; margin-top: 8px!important; } .gallery { margin-top: calc(3rem + 55px); text-align: center; font-size: 2vw; } .rowImg { display: flex; flex-wrap: wrap; padding: 0 4px; margin-top: 3rem; } .columnImg { flex: 33%; max-width: 33%; padding: 0 4px; } .columnImg img { width: 100%; } @media screen and (min-width:500px) and (max-width:1000px) { .columnImg { flex: 50%; max-width: 50%; } .gallery { font-size: 3vw; } } @media screen and (min-width:0px) and (max-width:500px) { .columnImg { flex: 100%; max-width: 100%; } .gallery { font-size: 5vw; } }