From d7398d3025939f74d74ead412578c4c6e6c94329 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Tue, 9 Mar 2021 14:15:49 +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 (between 768px and 1057px), the layout changes to stack the paragraphs vertically. On medium screens, however, there is not enough space to show more than two paragraphs next to each other. Previously, the 3rd paragraph was wrapped over to the next line. This commit improves the layout on medium screens by switching to immediately stacking the paragraphs vertically as soon as there is not enough space for them to be displayed in one row. Since the total width is still too much for one paragraph, the paragraphs are limited to 80% of the total width. Before (on 1000px width): [features page (on 1000px) before][1] After (on 1000px width): [features page (on 1000px) after][2] [1]: https://user-images.githubusercontent.com/8604205/109825316-62128a00-7c42-11eb-8391-650201257274.png [2]: https://user-images.githubusercontent.com/8604205/109825323-6343b700-7c42-11eb-86c1-e8307c5a727a.png PR Close #41051 --- aio/src/styles/2-modules/_features.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/aio/src/styles/2-modules/_features.scss b/aio/src/styles/2-modules/_features.scss index fce8580354..a5b724fb5a 100644 --- a/aio/src/styles/2-modules/_features.scss +++ b/aio/src/styles/2-modules/_features.scss @@ -24,7 +24,7 @@ flex-wrap: wrap; justify-content: space-evenly; - @media (max-width: 768px) { + @media (max-width: 1057px) { flex-direction: column; } @@ -32,8 +32,13 @@ max-width: 300px; margin: 0 16px; - @media (max-width: 768px) { + @media (max-width: 1057px) { max-width: 100%; + padding: 8px 10%; + } + + @media (max-width: 768px) { + padding: 8px 0; } } }