iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
George Kalpakas 2021-03-09 14:15:49 +02:00 committed by Andrew Kushnir
parent 1054d554d8
commit d7398d3025
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
aio/src/styles/2-modules/_features.scss
View File

@ -24,7 +24,7 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-evenly;
@media (max-width: 768px) { @media (max-width: 1057px) {
flex-direction: column; flex-direction: column;
} }
@ -32,8 +32,13 @@
max-width: 300px; max-width: 300px;
margin: 0 16px; margin: 0 16px;
@media (max-width: 768px) { @media (max-width: 1057px) {
max-width: 100%; max-width: 100%;
padding: 8px 10%;
}
@media (max-width: 768px) {
padding: 8px 0;
} }
} }
} }