LotusGuild/tinker_tickets
4
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix header overlap with ID selector — unambiguous highest specificity

Browse Source 
Use #main-content (specificity 1,0,0,0) to set padding-top at each breakpoint.
This cannot be overridden by any class-based rule regardless of cascade order,
permanently fixing the fixed header overlapping page content.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-04-01 17:45:14 -04:00
parent e71f35c041
commit 3cfe46050b
1 changed files with 15 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/base.css
+15
View File
@@ -352,6 +352,21 @@ hr {
padding-top: calc(var(--header-height) + var(--space-lg));
}
/* ID selector (specificity 1,0,0,0) beats any class combination — guarantees
the fixed header never overlaps content regardless of cascade order. */
#main-content {
padding-top: calc(var(--header-height) + var(--space-lg));
}
@media (max-width: 1023px) {
#main-content { padding-top: calc(var(--header-height) + var(--space-md)); }
}
@media (max-width: 767px) {
#main-content { padding-top: calc(50px + var(--space-md)); }
}
@media (max-width: 479px) {
#main-content { padding-top: calc(46px + var(--space-sm)); }
}
.lt-layout {
display: flex;
gap: var(--space-lg);