fix: halve gap between article hero image and body text - #140
Merged
Conversation
The hero/feature image section and the body section each contributed 64px of margin/padding, stacking to ~192px of whitespace between the image and the first paragraph on desktop/tablet (64px on mobile). Scope a targeted rule to the article-header section and the section right after it so only this gap is halved, leaving other section spacing on the site untouched. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
Commits
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On blog post pages, the vertical gap between the feature/hero image and the first paragraph of body text was much larger than intended (~192px on desktop/tablet, 64px on mobile).
Cause
The hero image and the body copy render as two separate
main .sectionelements. Generic section spacing rules instyles/styles.cssstack up between them:padding-bottom: 64pxmargin-top: 64px+padding-top: 64pxFix
Added a scoped rule in
blocks/article-header/article-header.csstargeting only the article-header section and the section immediately following it, halving each contributing value (64px → 32px). This keeps the change local to the hero-image-to-body transition and doesn't affect spacing between other sections on this or other pages.Result: gap goes from ~192px → ~96px on desktop/tablet, and 64px → 32px on mobile.
🤖 Generated with Claude Code