json-schema-org / json-schema-org/website

UI: Fix unwanted vertical stretching of content boxes on homepage

Open
#1,798 2 comments 0 reactions 1 assignee View on GitHub

@idanidan29 is already working on this.

Since Aug 8, 2025.

GSoC Status: In Progress Status: Stale
Dominant language
HTML
Stars
169
Forks
484
Avg merge
2d 2h
Merged PRs (30d)
6

Description

On the homepage, the three-column grid layout (containing "Join our Slack", the blog post, and "Upcoming events") exhibits undesirable behavior on desktop screen sizes. The left and right columns are forced to stretch vertically to match the height of the tallest column (the central blog post). This creates large, empty whitespace in the 'Join our Slack' and 'Upcoming events' boxes, which looks visually unpolished.

The expected behavior is that each box should only be as tall as its content requires.

Screenshot

Image

This is a single-class change that corrects the layout for all columns at once.

Code Change:

Find this div in the homepage template:

<!-- Before -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12 mx-auto w-5/6 md:w-3/5 lg:w-5/6">

And add the items-start class:

<!-- After -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12 mx-auto w-5/6 md:w-3/5 lg:w-5/6 items-start">

This is a minor but impactful UI polish that improves the look of the homepage on desktop. I'd be happy to create a pull request for this change.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.