forked from PeachCloud/peach-workspace
83 lines
1.5 KiB
Plaintext
83 lines
1.5 KiB
Plaintext
|
list of attributes to be removed from `peachcloud.css` for mobile
|
||
|
|
||
|
[ tested on Galaxy S5, iPhone 5 ]
|
||
|
|
||
|
@media only screen and (min-width: 350px)
|
||
|
main {
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
main {
|
||
|
width
|
||
|
}
|
||
|
|
||
|
card {
|
||
|
background-color
|
||
|
border-radius
|
||
|
/* needed on network_list: maybe set on list-container instead */
|
||
|
width: var(--max-width-5);
|
||
|
box-shadow
|
||
|
margin-top
|
||
|
margin-bottom
|
||
|
}
|
||
|
|
||
|
/* for network_add: may or may not be necessary */
|
||
|
card-container {
|
||
|
padding
|
||
|
}
|
||
|
|
||
|
list-container {
|
||
|
padding
|
||
|
}
|
||
|
|
||
|
/* network_add: inputs and buttons look nice with this */
|
||
|
card-container {
|
||
|
width: var(--max-width-5);
|
||
|
}
|
||
|
|
||
|
/* network_add: inputs and buttons look nice with this */
|
||
|
button {
|
||
|
width: 70%;
|
||
|
min-width
|
||
|
max-width
|
||
|
padding
|
||
|
}
|
||
|
|
||
|
/* needed for desktop (to place bottom nav at bottom of window) */
|
||
|
html {
|
||
|
height: 100%; /* wrecks bottom nav placement on my phone */
|
||
|
}
|
||
|
|
||
|
/* ADD THIS */
|
||
|
input {
|
||
|
width: 80%;
|
||
|
}
|
||
|
-----
|
||
|
|
||
|
testing with peach-web on laptop:
|
||
|
|
||
|
network_card | looks good
|
||
|
network_list | looks good
|
||
|
network_add | too small & buttons (best without card-container class)
|
||
|
network_detail | buttons different sizes
|
||
|
|
||
|
look at the .input attributes
|
||
|
- we need to have consistency between button & input (esp. widths)
|
||
|
|
||
|
network_detail
|
||
|
- sometimes the background colour is white on my phone
|
||
|
|
||
|
-----
|
||
|
|
||
|
breakpoints:
|
||
|
|
||
|
600px, 900px, 1200px, 1800px
|
||
|
|
||
|
"if you are designing your layout with a mobile-first approach, then use min-width breakpoints and work your way up"
|
||
|
|
||
|
```
|
||
|
@media only screen (min-width: 600px) {
|
||
|
...
|
||
|
}
|
||
|
```
|