Fix sponsor logo/header overlap on sponsors page by SergioChan · Pull Request #2960 · python/pythondotorg
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR updates the sponsors-page sponsor-tier markup to prevent sponsor logos from visually colliding with subsequent tier headers by adjusting layout spacing and logo container sizing in the sponsors list partial.
Changes:
- Adds bottom spacing between sponsor-tier sections to reduce header/logo collisions.
- Removes the single-row grid constraint so wrapped logo rows retain vertical space.
- Attempts to cap each rendered sponsor-logo ad container by the tier’s configured dimension.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <h1 style="font-size: {% if forloop.first %}350%{% else %}300%{% endif %}">{{ placement_info.label }} Sponsors</h1> | ||
|
|
||
| <div style="display: grid; grid-gap: 2em; grid-template-columns: repeat(auto-fit, minmax({{ dimension }}px, 0fr)); grid-template-rows: repeat(1, minmax({{ dimension }}px, 0fr)); align-items: center; justify-content: center;"> | ||
| <div style="display: grid; grid-gap: 2em; grid-template-columns: repeat(auto-fit, minmax({{ dimension }}px, 0fr)); align-items: center; justify-content: center; row-gap: 2.5rem;"> |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This grid now sets both grid-gap and row-gap. Since grid-gap already sets both row and column gaps, it’s clearer to use a single gap declaration (with separate row/column values if needed) to avoid conflicting/overriding spacing rules.
| <div style="display: grid; grid-gap: 2em; grid-template-columns: repeat(auto-fit, minmax({{ dimension }}px, 0fr)); align-items: center; justify-content: center; row-gap: 2.5rem;"> | |
| <div style="display: grid; gap: 2.5rem 2em; grid-template-columns: repeat(auto-fit, minmax({{ dimension }}px, 0fr)); align-items: center; justify-content: center;"> |
Copilot uses AI. Check for mistakes.
| data-ea-type="psf-image-only" | ||
| data-ea-force-ad="{{ sponsorship.sponsor.slug }}-psf-sponsors" | ||
| style="max-width:{{ sponsorship.sponsor.web_logo|ideal_size:dimension }}px;height:auto;width:auto;" | ||
| style="max-width:{{ sponsorship.sponsor.web_logo|ideal_size:dimension }}px;max-height:{{ dimension }}px;height:auto;width:auto;" |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The new max-height on the EthicalAds container won’t reliably prevent an oversized injected logo from visually overlapping the next section: if the injected content is taller than max-height, it can still overflow because overflow defaults to visible. Consider constraining the rendered content by adding an overflow rule (e.g., overflow: hidden) and/or applying sizing constraints to the injected <img>/iframe via a wrapper class/CSS so the cap actually prevents visual bleed.
| style="max-width:{{ sponsorship.sponsor.web_logo|ideal_size:dimension }}px;max-height:{{ dimension }}px;height:auto;width:auto;" | |
| style="max-width:{{ sponsorship.sponsor.web_logo|ideal_size:dimension }}px;max-height:{{ dimension }}px;height:auto;width:auto;overflow:hidden;" |
Copilot uses AI. Check for mistakes.
| {% for package, placement_info in sponsorships_by_package.items %} | ||
| {% if placement_info.sponsorships %} | ||
| <div title="{{ package }} Sponsors" align="center"> | ||
| <div title="{{ package }} Sponsors" align="center" style="margin-bottom: 3rem;"> |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
margin-bottom: 3rem; is applied to every sponsor tier container, including the last one, which may add unintended extra whitespace at the bottom of the page. If the intent is only to separate tiers, consider applying this spacing conditionally (e.g., only when not forloop.last) or via CSS using a :not(:last-child) selector.
Copilot uses AI. Check for mistakes.