shepherdlewis000
commented
3 years ago @rosenbergmichael I want to ensure that the app is responsive even on smaller phones. I think smallest mobile devices in general usage are at minimum 320px wide, such as the Moto G4. Chrome Developer Tools has a Device Toolbar/Device View to assist responsive design and the G4 is in the options for devices. Firefox also has a couple 320px wide devices including the iPhone 5.
When viewed 320px wide resolution, the site doesn't take full width of the screen. One step is to change usage of Bootstrap .container to .container-fluid which will make max-width of page be the display width. Then we'd need to have some check for device size and remove any left or right margin/padding so things can use the full width. The buttons could be changed to display block with .btn-block.
And more probably (checkboxes, font sizing...?)
-After each page/component, add styling, responsive media queries -White/offwhite backdrop, blue-ish accents/highlights -https://fonts.google.com/specimen/Poppins