Cyoa/responsive layout

[kiewi16]

What does this PR

This PR refactors the application to ensure responsiveness across various devices. It also includes minor functional changes to improve overall user experience.

Where should the reviewer start?

The reviewer should start by examining the changes in all of the component css files, particularly the updates to the media queries.

How should this be manually tested?

• [x] Open the application on different devices or use browser developer tools to simulate various screen sizes.
• [x] Verify that the layout adjusts smoothly and maintains usability across different resolutions.
• [x] Check the functionality of all interactive elements to ensure they work as expected after the refactor.

  Any background context you want to provide?

  This refactoring was part of our CYOA (iteration 5) to enhance the application's responsiveness. We aimed to streamline the user experience on all devices, ensuring consistency and accessibility.

  What are the relevant tickets (if any) ?

  N/A

  Screenshots (if appropriate)

  N/A

  Questions:

  No questions at this time.

[reesegreen2014]

Thank you so much for your collaboration on this @kiewi16! With you having responsiveness in your mind from the beginning when constructing our component architecture, it really helped us in ensuring that our application was responsive across multiple devices. Cheers!