fix(docs-infra): improve the layout of the "Features" page on medium screens (#41051)

The "Features" page organizes features in groups/rows of 3 features
each. On wide screens, all 3 paragraphs of a group/row can be shown next
to each other. On narrow screens, the layout changes to stack the
paragraphs vertically. On medium screens, however, the 3rd paragragh is
wrapped over to the next line.

Previously, the wrapped content was left-aligned, which left a lot of
empty space on the right.

This commit improves the layout on medium screens by ensuring the
paragraphs are horizontally centered (with space distributed evenly
around them).

Before: ![features page before][1]
After: ![features page after][2]

[1]: https://user-images.githubusercontent.com/8604205/109344670-b64ef000-7877-11eb-9013-890562ff2f3d.png
[2]: https://user-images.githubusercontent.com/8604205/109344678-b7801d00-7877-11eb-9224-d7715f7d7235.png

PR Close #41051
This commit is contained in:
George Kalpakas 2021-03-09 14:15:15 +02:00 committed by Andrew Kushnir
parent 27bb6f6a04
commit 269d7e4d22
1 changed files with 1 additions and 0 deletions

View File

@ -22,6 +22,7 @@
.feature-row {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
@media (max-width: 600px) {
flex-direction: column;