From 269d7e4d228e7966f7be8bcbb726514d33fdebd9 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;