[UI] Misaligned and Broken FAQ Cards on Tablet Viewport

[TejasMore477]

Description

The cards displayed in the "FAQ" section are misaligned, especially on tablet viewports (like Surface Pro 7). The layout breaks when certain FAQ items are expanded, resulting in an inconsistent and unprofessional appearance. These layout issues impact the visual balance and responsiveness of the section, degrading the overall user experience. Also the styling of the "Question" does not matches with the over all stylings of the sit, promoting inconsistent UI.

How to Reproduce the Issue

1. Open the Recode Hive website in a Chromium-based browser (e.g., Brave or Chrome).
2. Resize the screen to 912 × 1368 resolution at 75% zoom (Surface Pro 7 or similar tablet device).
3. Scroll to the FAQ section.
4. Expand different FAQ cards (e.g., "How can I earn from this recode hive organisation").
5. Observe the misalignment, overflow, and shifting of cards.

Screenshots of the Issue

What and How It Should Be

Issue:

1. Cards overflow into new rows without enough reason, breaking the 2-column layout.
2. On expanding answers, FAQ cards shift unpredictably, leaving large white spaces.
3. Some cards drop to the next row, even when horizontal space seems available.
4. The layout varies based on which FAQ is expanded, creating inconsistency.
5. The footer also becomes misaligned as a result of these layout problems.

Desired Solution:

1. Use CSS Flexbox or Grid with align-items: center and justify content-center to ensure vertical and horizontal alignment of FAQ comp, on a parent rapper - a Div.
2. Add media queries to maintain a predictable 1column layout depending on viewport size.
3. Update stylings for insuring the correct and consistent UI stylings.

Affected Viewport

Device: Surface Pro 7 or tablets with similar resolution
Resolution: 912 × 1368

Browsers: Chromium-based (e.g., Brave, Chrome, Microsoft Edge)

Additional Notes

Consistent layout is a key part of trust and professionalism in design.

Fixing these UI bugs will not only improve visual appeal but also enhance usability across devices.

Using proper responsive techniques ensures smoother experiences for both desktop and mobile users

[github-actions]

🚀 Thanks for opening this issue! The team will review it shortly.

[github-actions]

👤 Issue assigned to @TejasMore477.

[sanjay-kv]

Hi Tejas are you part of any community like gssoc?

[TejasMore477]

No I am just a developer exploring open source

[github-actions]

✅ This issue has been closed. Thank you for your contribution!

[sanjay-kv]

thanks for raising this one, there is more improvement can be done to the site feel free to raise new one @TejasMore477 I will also do sponsorship if you do more than 20 PR