fix:improve footer responsiveness on smaller screens #3626
Conversation
|
Hi @martin-g , this PR improves footer responsiveness on small screens. Please take a look. |
| margin-right: auto; | ||
| display: block; | ||
| } | ||
| } |
| font-family: "PT Mono", monospace; | ||
| } | ||
|
|
||
| @media (max-width: 996px) { |
There was a problem hiding this comment.
Why 996 ?
https://getbootstrap.com/docs/5.0/layout/breakpoints/ uses 992
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| text-align: center; |
There was a problem hiding this comment.
| text-align: center; |
This one seems redundant. The one at line 49 will override it anyway.
| text-align: center; | ||
| } | ||
|
|
||
| footer [class^="col-"] { |
There was a problem hiding this comment.
This will match only if "col-..." is the first item in class="...", e.g. class="col-3", but it won't match for class="another col-3"
| } | ||
|
|
||
| footer [class^="col-"] { | ||
| width: 100% !important; |
There was a problem hiding this comment.
!important is usually not recommended. Did you try without it ? E.g. with more concrete selector.
| margin: 0.4rem; | ||
| } | ||
|
|
||
| footer img { |
There was a problem hiding this comment.
Is this needed ?
<img> is an inline element, so the text-align: center from line 49 should be enough.
|
Thanks for the detailed review! I’ve noted the points and will address them shortly with an updated commit. |
2 participants
Problem
What changed
Before
After