The website was not responsive based on different screen sizing and there were also issues with the collapsing of the green current selections tab and resizing upon pressing a different radius distance. The usability has now been updated so it is responsive on all device sizes and the other issues are no longer present either.
Why was it changed?
It was changed because the website needs to be responsive so users can also use a phone or other device to volunteer and because it affected the usability of the website.
How was it changed?
Primarily I went through index.css and changed sizing in px to sizing in vh, vw, rem, em, and % where applicable. I also needed to make these changes on SearchBar.css. This helped resolve many of the issues with the current selections tab and made the website more responsive. Then, I made styling changes as necessary to respond to different device sizing. Specifically, I adjusted the padding, flex styles, etc. on the Sign Up for Shifts Page and padding adjustments on the Confirmation Page.
Screenshots that show the changes (if applicable):
Fixes #81
What was changed?
The website was not responsive based on different screen sizing and there were also issues with the collapsing of the green current selections tab and resizing upon pressing a different radius distance. The usability has now been updated so it is responsive on all device sizes and the other issues are no longer present either.
Why was it changed?
It was changed because the website needs to be responsive so users can also use a phone or other device to volunteer and because it affected the usability of the website.
How was it changed?
Primarily I went through index.css and changed sizing in px to sizing in vh, vw, rem, em, and % where applicable. I also needed to make these changes on SearchBar.css. This helped resolve many of the issues with the current selections tab and made the website more responsive. Then, I made styling changes as necessary to respond to different device sizing. Specifically, I adjusted the padding, flex styles, etc. on the Sign Up for Shifts Page and padding adjustments on the Confirmation Page.
Screenshots that show the changes (if applicable):
Ipad-Pro View:
IPhone 12 View:
Desktop View:
Updated Confirmation Page Spacing: