0d1b3fe55e
IE11 does not support `justify-content: space-evenly` and therefore falls back to the default (`flex-start`), breaking the layout of the items in the "Features" page (see the image below). This commit fixes the layout by specifying `space-around` as a fallback for `justify-content`, which keeps the layout closer to the intended. Before: ![features page layout in IE11 before][1] After: ![features page layout in IE11 after][2] [1]: https://user-images.githubusercontent.com/8604205/110811038-045bee80-828f-11eb-8027-d5851762a5eb.png [2]: https://user-images.githubusercontent.com/8604205/110811076-0a51cf80-828f-11eb-98a0-2f2928128dd0.png PR Close #41183
48 lines
886 B
SCSS
48 lines
886 B
SCSS
// FEATURES MARKETING PAGE SPECIFIC STYLES
|
|
|
|
.feature-section {
|
|
margin: 0 0 32px;
|
|
|
|
.feature-header, .text-headline {
|
|
text-align: center;
|
|
}
|
|
|
|
.feature-header img {
|
|
margin: 16px;
|
|
max-width: 70px;
|
|
}
|
|
|
|
.feature-title {
|
|
@include font-size(16);
|
|
font-weight: 500;
|
|
margin: 8px 0px;
|
|
clear: both;
|
|
}
|
|
|
|
.feature-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around; // This is required for browsers that do not support
|
|
// `space-evenly` (such as IE11).
|
|
justify-content: space-evenly;
|
|
|
|
@media (max-width: 1057px) {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.feature {
|
|
max-width: 300px;
|
|
margin: 0 16px;
|
|
|
|
@media (max-width: 1057px) {
|
|
max-width: 100%;
|
|
padding: 8px 10%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
padding: 8px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|