stylesheet: fix logo layout on Chrome
The new layout hits a bug where the logo are not laid out properly. See https://github.com/philipwalton/flexbugs/issues/225
This commit is contained in:
parent
c1743d63d1
commit
afac5e3b16
1 changed files with 15 additions and 3 deletions
|
@ -50,15 +50,27 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
|
|||
.procedure-logos {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
> :not(:last-child) {
|
||||
margin-right: $default-padding;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 50px;
|
||||
max-width: 100%;
|
||||
margin: 0 10px 20px 10px;
|
||||
max-height: 50px;
|
||||
|
||||
// Fix Chrome flexbox issue
|
||||
// See https://github.com/philipwalton/flexbugs/issues/225
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
object-fit: contain;
|
||||
|
||||
@media (min-width: $procedure-context-breakpoint) {
|
||||
max-height: 130px;
|
||||
max-width: 500px;
|
||||
max-height: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue