Repository navigation
Conversation
Below about 414px, the parallax hero's negative top margin pulls it up next to the header's floated menu toggle. Because the hero is `overflow: hidden`, it then shrinks to fit beside that float, so the heading breaks mid-word and the text runs a word or two per line. Drop the negative top margin below 768px, where the header has no bottom margin for it to cancel anyway. The hero then starts below the header at full width; wider layouts are unchanged. Bump the theme version so the stylesheet URL changes. See https://meta.trac.wordpress.org/ticket/6522. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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
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.
Fixes https://meta.trac.wordpress.org/ticket/6522
Fixes #3
On phones narrower than 414px, the home page hero is squeezed into a narrow column next to the menu button and its heading breaks mid-word.
Below 768px, the parallax hero rule
.page-template-template-homepage:not(.has-post-thumbnail) .site-main > .sph-hero:first-child { margin-top: -4.2358em }pulls the hero up into the header, beside the right-floated menu toggle. Because the hero hasoverflow: hidden, it shrinks to fit next to the button instead of running under it: 238px wide on a 375px screen. From 414px up there's no room beside the button, so the hero drops below it at full width, which is why only phones break.This resets that margin to 0 below 768px, and bumps the theme version to 1.0.1 so the stylesheet's
?ver=changes and browsers pick up the new CSS.Testing
Screenshots
Live https://doaction.org/ at 375px, with the patched stylesheet swapped in for “after”.
At 320px the word “communities” is still wider than the box at the current font size; that's left for a separate change.
Props upadalavipul.
🤖 Generated with Claude Code