$break-small: 764px; $break-medium: 991px; $break-medium: 1200px; .notification-wrapper { width: 350px; height:8em; padding: 0.3em; border-bottom: 1px solid #cccccc; margin: -3px -20px; // ToDo: Include media queries for thumbnail .thumbnail-wrapper { width: 7.4em; height: 7.4em; padding:0; cursor: pointer; text-align: center; img { max-width: 100%; max-height: 100%; } &::before { content: ' '; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ height: 100%; } } h1 { margin-top: 0.3em; margin-bottom: 0.15em; font-size: 1.8em; } .sub-header{ margin-bottom: 1em; } .notification-action{ color: $ascribe-color-green; } } .notification-menu { .dropdown-menu { padding: 0 !important; li a { padding-top: 0; } } } .notification-amount { padding: 0.3em; font-size: 1.2em; } .ascribe-global-action { text-align: center; padding: 1em; color: black; border: 1px solid #cccccc; background-color: white; margin-top: 1px; }