Description
When a post has a single author, the author bio section appears visually shifted to the left on post pages. The content (photo, name, bio, location) should be centered between the green rule borders.
What was tried
margin: 0 auto on the card — no effect (grid child)
justify-self: center on the grid child — no effect
max-width + margin: 0 auto on the grid container — no effect
- Switching from CSS Grid to Flexbox with
align-items: center — no effect
- Removing
max-width constraint entirely — no effect
Since none of these CSS changes produced any visible difference, the issue may be:
- Browser scrollbar shifting the viewport (macOS "Always show scrollbars" setting)
- A parent container or Ghost-injected element causing asymmetry
- The content being actually centered but appearing off due to asymmetric text wrapping
Current state
The author grid currently uses display: flex; flex-direction: column; align-items: center for single authors and overrides to display: grid; grid-template-columns: 1fr 1fr for multiple authors.
Files involved
partials/components/author-card.hbs
assets/css/screen.css (~line 2954, .wc-author-grid)
Next steps
- Inspect with browser DevTools to identify which element is actually off-center
- Check if the offset is consistent across the entire page or specific to this section
- Test with scrollbar visibility toggled
Description
When a post has a single author, the author bio section appears visually shifted to the left on post pages. The content (photo, name, bio, location) should be centered between the green rule borders.
What was tried
margin: 0 autoon the card — no effect (grid child)justify-self: centeron the grid child — no effectmax-width+margin: 0 autoon the grid container — no effectalign-items: center— no effectmax-widthconstraint entirely — no effectSince none of these CSS changes produced any visible difference, the issue may be:
Current state
The author grid currently uses
display: flex; flex-direction: column; align-items: centerfor single authors and overrides todisplay: grid; grid-template-columns: 1fr 1frfor multiple authors.Files involved
partials/components/author-card.hbsassets/css/screen.css(~line 2954,.wc-author-grid)Next steps