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) {
|
|
...
|
|
}
|
|
```
|