Result mobile

[crisdevs]

Overview

Result Mobile

• [x] Bug
• [ ] Feature
• [ ] Tech Debt

Description

• Added more margin between title and image on the result cards as I was seeing the title and image collide.
• Increased the size of the cards on smaller mobile sizes
• Removed padding on inner modal container due to the size of the inner container being bigger than the outer container and is especially noticeable on mobile
• Changed the links to appear on top of the body of the more details modal to give the modal body more room and be more accessible on mobile.
• Increased height of modal on mobile to give body text more room to be shown
• Reduced font size on mobile to give more room for body text
• After increasing the size of the height of the modal I needed to adjust the modal top values on the top modal due to the top and bottom portions of the modal being cut off.

Ticket Item FE/ Results page responsiveness for mobile / tablets #120

Steps to Reproduce Bug / Validate Feature / Confirm Tech Debt Fix

1. Open the project and go to the resultMobile branch
2. You may need to run 'npm install' in the terminal
3. Navigate to the client folder in the terminal
4. Run 'npm run start'
5. Open a separate terminal and navigate to the server folder
6. run 'npm run dev'
7. Open up a browser and navigate to the application on localhost
8. Navigate to the questionnaire section of the application and go through the questions
9. You will now see the result page
10. You can then resize the window or look at smaller views in the Chrome dev tools
11. To open the modal tap/click on view more button on one of the cards

Previous behavior Styling for the results page was not mobile friendly making it difficult to read/interact with on mobile

Expected behavior The results page should now be more accessible via mobile/tablet

Screenshots & Videos