Audit the "Added CSS" on aguiarinjurylawyers.com. Break down every section, identify internal conflicts, flag cross-snippet risks, and rank issues by priority.
Projects/added-css-audit-2026-04-05.md| # | Section | Lines | Purpose |
|---|---|---|---|
| 1 | Layout & Header | 3-16 | Masthead z-index, breadcrumb sizing |
| 2 | Mobile Drawer Nav (Original) | 19-41 | Sub-toggle positioning, link width (.mobile-navigation) |
| 3 | Performance & CLS Fixes | 43-113 | Aspect ratios, LCP optimization, content-visibility, responsive hide, slider min-heights, GPU accel |
| 4 | Hide on Phone | 115-120 | .hide-on-phone below 767px |
| 5 | Call Widget Hide (Desktop) | 122-146 | Hides Intaker "Call us" widget above 769px |
| 6 | Hero Image Hide (Small Phones) | 148-150 | Hides .hero-lcp-image below 33em (528px) |
| 7 | Mobile Footer Centering | 152-191 | Centers all footer content below 767px |
| 8 | Gravity Form Fixes | 193-267 | Consent text, submit button, iOS zoom fix, touch targets, dark-bg labels, hamburger sizing |
| 9 | Mobile Sticky Header & Phone | 274-349 | Sticky header bg, phone number styling, header padding 8px |
| 10 | Attorney Profile & Mobile Fixes | 351-403 | Content area margins, awards bg, chat widget offset, logo sizing, header padding 6px, hero padding |
| 11 | Mobile Drawer Nav (March 2026) | 405-453 | Improved tap targets, separators, sub-menu bg (.drawer-navigation) |
| 12 | Sticky Top Header Row | 469-503 | Fixed top row, admin bar offset, commitment card colors |
| 13 | Full-Width Breakout | 505-593 | Hero/trust bar/CTA banner full viewport width, trust bar styling, 4th-item show/hide |
1. Mobile breakpoint inconsistency (768px vs 767px)
Five blocks use max-width: 768px, two use 767px, one uses screen and (max-width: 767px). At exactly 768px (iPad portrait), some mobile styles fire and others don't. Footer centering doesn't kick in until 767px, but the trust bar hides at 768px.
Fix: Standardize on 767px (Kadence default). Update the five 768px blocks to 767px.
2. Header padding conflict (8px vs 6px)
Two rules set .site-main-header-inner-wrap padding with !important. Section 9 sets 8px 0 at max-width: 1024px. Section 10 sets 6px 0 at max-width: 768px. The 6px wins only by source order.
Fix: Either delete the 8px rule from the 1024px block, or scope it to tablet-only: @media (min-width: 769px) and (max-width: 1024px).