Skip to content

Funding page: uneven card gaps and mismatched heights #867

@NishantSinghhhhh

Description

@NishantSinghhhhh

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:

  1. 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.

  2. 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

  1. Navigate to the Funding page
  2. Observe the two-column card grid
  3. Compare the vertical gap between different card rows — the spacing is visibly uneven
  4. 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
Image Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    GSoCContributed in the context of the Google Summer of CodetechnicalTechnical issues on the website

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions