scalie-business
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix protruded infomation board section in about/more page (#4415) 

* Fix protruded infomation board section

Set "flexwrap: wrap" for sections. Set upper and lower padding for each section, and adjust clearances around sections accordingly. Settings for viewport threshold 500px is no more needed.

* Fix mistake of reducing information-board padding

In according with this fix, additional padding setting  for maximum 840px width is no more needed.
This commit is contained in:
Lynx Kotoura 2017-07-28 20:34:44 +09:00 committed by Eugen Rochko
parent 296bfa23aa
commit afb593b44e
1 changed files with 4 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/styles/about.scss
View File

@ -121,7 +121,7 @@
.information-board { .information-board {
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
padding: 40px 0; padding: 20px 0;
.panel { .panel {
position: absolute; position: absolute;
@ -162,13 +162,14 @@
.information-board-sections { .information-board-sections {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
} }
.section { .section {
flex: 1 0 0; flex: 1 0 0;
font: 16px/28px 'mastodon-font-sans-serif', sans-serif; font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
text-align: right; text-align: right;
padding: 0 15px; padding: 10px 15px;
span, span,
strong { strong {
@ -190,14 +191,6 @@
color: $primary-text-color; color: $primary-text-color;
} }
} }
@media screen and (max-width: 500px) {
flex-direction: column;
.section {
text-align: left;
}
}
} }
.owner { .owner {
@ -661,16 +654,12 @@
padding: 0 20px; padding: 0 20px;
} }
.information-board {
padding-bottom: 20px;
}
.information-board .container { .information-board .container {
padding-right: 20px; padding-right: 20px;
.panel { .panel {
position: static; position: static;
margin-top: 30px; margin-top: 20px;
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;