Closed VitthalGund closed 10 months ago
Thanks for raising the Issue and the proposed solution!! :tada:
The solution still has issues, because it does wrap the table rows, the table structure itself is still preserved:
Big divider after every 7 persons
It also has strange jumps of the padding when the screen width is changed, and the vertical alignment is jumping:
I believe the concept of a TABLE is wrong here.
Changed that to a free floating thing with a78dcd7fdbbbbec Let me update the gh-pages, :hammer:
After:
This issue has been automatically locked since there has not been any recent activity (i.e. last half year) after it was closed. It helps our maintainers focus on the active issues. If you have found a problem that seems similar, please open a new issue, complete the issue template with all the details necessary to reproduce, and mention this issue as reference.
🗹 Requirements
🎯 Subject of the issue
Experienced behavior: As individuals new to open source, it's disheartening to notice that the Contributor page is no longer responsive. I discovered this issue when working on Issue #1384 and received a reply from @Finii here. As a responsible contributor, I decided to analyze and address this issue optimally.
The Contributor page functions well in desktop view. However, when the screen width falls below 715px, it starts causing problems by overflowing rows in the table that represents individual contributors. To resolve this issue, I made modifications to base.scss, as follows:
Expected behavior: For screen sizes less than 715px (width), I've added media queries to change the display of table rows to flex, aligning elements and text at the center both vertically and horizontally. I also added flex-wrap: wrap to wrap elements when they start overflowing from their parent element, which is a table. This modification ensures that the Contributor page works smoothly across all screen sizes. Additionally, I introduced spacing between elements in rows to prevent overcrowding.
🔧 Your Setup
★ Screenshots (Optional)
Before:
After: