greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: move toggle buttons below labels on mobile

pull/36688/head
Oliver Eyton-Williams 2019-08-22 14:20:39 +02:00 committed by mrugesh
parent ab806c1e5d
commit 432e4a40a3
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/components/helpers/toggle-button.css
View File

@ -65,11 +65,6 @@ label.toggle-label {
} }
@media (max-width: 440px) { @media (max-width: 440px) {
.btn-group .btn + .btn {
margin-left: 0px;
margin-top: -2px;
}
.btn:first-child > .tick { .btn:first-child > .tick {
left: auto; left: auto;
right: 5px; right: 5px;

12
client/src/components/settings/toggle-setting.css
View File

@ -25,6 +25,10 @@
} }
@media (max-width: 440px) { @media (max-width: 440px) {
.toggle-setting-container .form-group {
flex-direction: column;
}
.toggle-setting-container > .form-group > * { .toggle-setting-container > .form-group > * {
flex: 0 1 auto; flex: 0 1 auto;
} }
@ -33,9 +37,13 @@
justify-content: flex-start; justify-content: flex-start;
} }
.toggle-setting-container .help-block {
margin-bottom: 0px;
}
.toggle-setting-container .btn-group { .toggle-setting-container .btn-group {
flex-direction: column;
align-items: stretch;
justify-content: flex-start; justify-content: flex-start;
margin-top: 5px;
margin-bottom: 5px;
} }
} }