json-schema-org / json-schema-org/website
UI: Fix unwanted vertical stretching of content boxes on homepage
@idanidan29 is already working on this.
Since Aug 8, 2025.
- 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
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.