.example-card { width: 150px; height: 125px; padding: 0px; } .deleteButton { top:-5px; right:-5px; position:absolute; } /* Coerce the icon container away from display:inline */ .mat-icon-button .mat-button-wrapper { display: flex; justify-content: center; } .image { width: 100%; } .example-full-width-height { width: 100%; height: 100% } .centered { margin: 0 auto; top: 50%; left: 50%; } .img-div { height: 60px; padding: 0px; margin: 8px 0px 0px -5px; width: calc(100% + 5px + 5px); overflow: hidden; border-radius: 0px 0px 4px 4px; } .max-two-lines { display: -webkit-box; display: -moz-box; max-height: 2.4em; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .file-link { width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } @media (max-width: 576px){ .example-card { width: 125px !important; } }