From d8dade8d68ea87cd4ff597a7b7467e8b3f3bd62e Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Tue, 9 Mar 2021 14:15:15 +0200 Subject: [PATCH] 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 --- aio/src/styles/2-modules/_features.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/aio/src/styles/2-modules/_features.scss b/aio/src/styles/2-modules/_features.scss index d553611a683..7bd13ea509d 100644 --- a/aio/src/styles/2-modules/_features.scss +++ b/aio/src/styles/2-modules/_features.scss @@ -22,6 +22,7 @@ .feature-row { display: flex; flex-wrap: wrap; + justify-content: space-evenly; @media (max-width: 600px) { flex-direction: column;