-
-
Notifications
You must be signed in to change notification settings - Fork 136
Funding page: uneven card gaps and mismatched heights #867
Copy link
Copy link
Open
Labels
GSoCContributed in the context of the Google Summer of CodeContributed in the context of the Google Summer of CodetechnicalTechnical issues on the websiteTechnical issues on the website
Description
Page URL
https://precice.org/about.html
What is wrong?
Bug: Funding page cards have uneven gaps and misaligned grid layout
Description
The funding cards on the /funding page have two related layout problems:
-
Unequal vertical gaps between cards — the spacing between rows is inconsistent. Some card pairs have a large gap between them while adjacent pairs are much tighter, making the grid feel unbalanced.
-
Cards are not equal height within a row — when one card in a row has more content than the other (e.g. a longer description or an extra field like "Funding number"), the two cards end up at different heights instead of stretching to match each other. This breaks the visual grid alignment.
Steps to Reproduce
- Navigate to the Funding page
- Observe the two-column card grid
- Compare the vertical gap between different card rows — the spacing is visibly uneven
- Compare card heights within the same row — cards with shorter content are shorter than their neighbors
Expected Behavior
- All cards in the same row should be equal height (stretch to match the tallest card)
- Vertical and horizontal gaps between all cards should be uniform throughout the grid
Suggested Fix
we can use grid or flexbox to solve the issue
Screenshots
Screencast.from.2026-03-24.00-53-23.webm

Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
GSoCContributed in the context of the Google Summer of CodeContributed in the context of the Google Summer of CodetechnicalTechnical issues on the websiteTechnical issues on the website