Feature: Implement Responsive Design Across the Application

[esthersoftwaredev]

Type of feature

✨ Feature

Current behavior

The application lacks a fully responsive design in some areas, particularly the card carousel, which does not adapt optimally to different screen sizes.
Issues include:

• The carousel layout may break or become misaligned on smaller screens.
• Cards may appear too large or too small depending on viewport size.
• Navigation buttons and the paginator may not be properly positioned on mobile devices.

Suggested solution

Implement responsive design improvements, focusing primarily on the carousel, while ensuring consistency across the application.

Implementation Details

• Use CSS media queries to adjust card sizes and spacing dynamically (still with SCSS syntax).
• Media queries to be placed bellow all existing code, if they are global use styles.scss otherwise the relevant component.
• Ensure carousel animations scale properly across different screen sizes.
• Improve touch interactions for mobile users.
• Optimize button and paginator positioning for smaller screens.

Expected Behavior

• The carousel should maintain proper alignment and scaling on all screen sizes.
• Navigation buttons and the paginator should be easily accessible on mobile.
• The application should follow a consistent responsive design approach.

Resources

• CSS Media Queries
• Responsive Design Best Practices

Additional context

No response

I would be willing to submit a PR to fix this issue

• Yes and I have read the Contribution Guide and I agree to follow this project's Code of Conduct
• No

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.