Ensure consistent and responsive course card heights on /courses page

[kyleecodes]

Overview

All course cards displayed on the '/courses' page must have a consistent height. Currently, the varying lengths of course card titles are causing unintended height differences in the UI (see attached image for reference). The course card heights should remain uniform across the page while ensuring responsiveness across all devices.

Action Items

• Configure the course card heights on '/courses' page to be the same height.
• Check that course card heights are consistent and responsive on different devices (mobile, browser, tablet, etc).

Resources

[maniac-tech]

No one has been assigned the issue yet, is this up for grabs ?

[github-actions]

Thank you @maniac-tech you have been assigned this issue!
Please follow the directions in our Contributing Guide. We look forward to reviewing your pull request. ✨

---

Support Chayn's mission? ⭐ Please star this repo to help us find more contributors like you!
Learn more about Chayn's impact here. 🌸

[Rafacv23]

I can do it

[kyleecodes]

@maniac-tech any updates on this issue?

@Rafacv23 thanks for your interest! If there are no updates from the current assignee within 1 week, this issue will be marked "stale" and open for new assignees. We can ping you to be re-assigned then.

[OfficialSubham]

Can i work on this??

[github-actions]

Thank you @OfficialSubham you have been assigned this issue!
Please follow the directions in our Contributing Guide. We look forward to reviewing your pull request. ✨

---

Support Chayn's mission? ⭐ Please star this repo to help us find more contributors like you!
Learn more about Chayn's impact here. 🌸

[OfficialSubham]

hey please assign it to someone else because i cannot do this as there is no documentation in your github on how to start your app. You guys should make one then it will be very good for beginners

[Shrihari10]

Hey @kyleecodes, I believe I can fix this. I am pretty new to open source, so I would like to give this a shot since the current assignee has asked this to be reassigned. Thanks in Advance

[github-actions]

Thank you @Shrihari10 you have been assigned this issue!
Please follow the directions in our Contributing Guide. We look forward to reviewing your pull request. ✨

---

Support Chayn's mission? ⭐ Please star this repo to help us find more contributors like you!
Learn more about Chayn's impact here. 🌸

[Shrihari10]

Hey @kyleecodes, I've got both the frontend and the backend running. I would like to understand what solution is expected. From what I see, we have 3 - 4 approaches to solve this,

1. Convert 2 columns to 1 column below 800 pixels like mobile screens (Straight forward)

2. Introduce word break, which adds hyphen to the broken word

3. Hide extra characters with ......

4. Rearrange contents inside the card such that icon comes on top and text pans the entire card width (2 rows like courses on coursera)

Please let me know what you would want me to implement, thanks!

[kyleecodes]

@Shrihari10 great question! These are all great solutions. I would suggest a combination:

1. Convert 2 columns to 1 for mobile screens.
2. Implement a standard, fixed card size. Then use hyphens or hiding extra characters with "..." to help conform all cards to the same size regardless of text.

[Shrihari10]

@kyleecodes sounds good, I'll push the fix by today EOD. Thanks again!

[Shrihari10]

@kyleecodes please review the video below and the PR linked to this issue. Let me know if any further changes are required.

bloom-frontend-fix.mp4