Fix footer overlap issue on blog posts with navigation #342
Conversation
✅ Deploy Preview for gokarna-hugo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
@526avijitgupta @jamesericdavidson Can you have a look as well ? |
There was a problem hiding this comment.
Pull Request Overview
This PR fixes the footer overlapping with single-sided post navigation by containing floated nav links and adjusting spacing.
- Wraps the existing prev/next links in a
.post-navigationcontainer for clearfix - Adds CSS to reduce bottom margin when navigation is present and to clear floats
- Increases vertical padding around the post navigation for consistent spacing
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| layouts/partials/prev-next.html | Wrapped existing navigation markup in a <div class="post-navigation"> |
| assets/css/main.css | Added body:has(.post-navigation) rule, .post-navigation padding and clearfix |
|
Thanks, @kitbur! LGTM. N.B. I've not used TestingI tested against
[params]
togglePreviousAndNextButtons = true
cd exampleSite/content/posts/
sed -i '/weight: /d' *.mdScreenshotsScreenshot examples of this PR: Emoji Support
Theme Documentation - Advanced
|
There was a problem hiding this comment.
Hi @kitbur thanks for the fix!
I've left one nit comment. Could you please also apply the copilot suggestions?
assets/css/main.css
Outdated
| content: ""; | ||
| display: table; | ||
| clear: both; |
There was a problem hiding this comment.
nit: let's order alphabetically
clear: both;
content: "";
display: table;There was a problem hiding this comment.
No problem; I'm happy to help!
|
Thanks for the review! I think I got everything. Let me know if you'd like any more changes. |
Fixes a bug in which the footer was overlapping with the previous/next post navigation links on posts when only one navigation button was present (e.g., on the most recent post where no "next" button exists).
Changes:
prev-next.htmlin a container, and added clearfix to the container to properly contain the floated elements.margin-bottom: 170px;was creating excessive space between the navigation and footer on blog posts. A targeted rule reduces this to80pxto maintain consistent spacing while accounting for floated post navigation elements.