New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: align footer-tablet view #15918
Conversation
✅ Deploy Preview for docs-eslint ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
@@ -7,6 +7,7 @@ | |||
|
|||
@media all and (max-width: 800px) { | |||
padding: 1.5rem 0 4rem; | |||
align-items:center ; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
align-items:center ; | |
align-items: center; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, thank you!
Let's keep it open for other team members to review.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Noticed one oddity at exactly 800px after I submitted my initial review. Leaving this as a comment rather than request changes because I don't think it should block merging if changing the breakpoint feels out of scope for this change.
@@ -7,6 +7,7 @@ | |||
|
|||
@media all and (max-width: 800px) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Try setting your view width to exactly 800px. It'll give a combination of the tablet and desktop views:
That's because there's a min-width: 800px
media query that makes .docs-content
a grid.
Currently, the footer is centered at widths <= 800px, and the page is a grid at >= 800px, so there's a bit of overlap. If we make this a max-width of 799px, that overlap goes away:
@media all and (max-width: 800px) { | |
@media all and (max-width: 799px) { |
@@ -7,6 +7,7 @@ | |||
|
|||
@media all and (max-width: 800px) { | |||
padding: 1.5rem 0 4rem; | |||
align-items: center; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is included in #15944
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Okay!
Closing this PR in favor of #15944 |
Prerequisites checklist
What is the purpose of this pull request? (put an "X" next to an item)
What changes did you make? (Give an overview)
Changed the footer alignment in docs for tablet view.
Before :
After :