.info-container { position: absolute; top: 50%; left: 0; right: 0; bottom: 3rem; padding: 0.25em 0em; background: #fff; background-color: rgba(255,255,255,0.98); z-index: 1000; overflow-y: auto; } .info-container .h2:first-child { margin-bottom: 0.5rem; margin-top: 0.5rem; margin-left: -0.1em; padding: 0 0.75rem; } #root .leaflet-container .leaflet-control-attribution { width: 100%; height: 3rem; background: #fff; background: rgba(255, 255, 255, 0.7); } .leaflet-right{ left: 0; } @media (min-width: 380px){ .info-container { bottom: 2rem; } #root .leaflet-container .leaflet-control-attribution { height: 2rem; } } @media (min-width: 768px){ .info-container { top: 0; left: 0; width: 20rem; bottom: 0; } .leaflet-right{ left: 20rem; } #root .leaflet-container .leaflet-control-attribution { height: auto; } } .sidebar-header .h2 { display: inline-block; } .sidebar-header .icon-button { margin-left: 0.25rem; margin-top: 0.4rem; } .sidebar-header .icon-button:hover { background-color: #eee; }