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