child of .blg-cover-articles, whatever it is". In the grid layout it was written for, that first child is some decorative element meant to be hidden on small phones. But on THIS site's cover layout (skin: vogue), that same first child is .blg-hero-main-wrap — the entire headline block (title + category tag). Below 640px width, every visitor's phone shows the cover background image with no headline text at all. .blg-cover-articles>div:first-child has specificity (0,2,0) (one class + :first-child, which counts the same as a class) with !important, so a plain ".blg-hero-main-wrap { display: flex !important }" (0,1,0) still loses on specificity even though this file loads after the parent's. Qualifying the selector with two ancestors pushes it to (0,3,0), which wins outright — no reliance on cascade order to break a tie. ============================================================ */ @media (max-width: 640px) { .blg-layout .blg-cover-articles .blg-hero-main-wrap { display: flex !important; } } /* ============================================================ 5. HERO TITLE OVERSIZED ON TALL NARROW PHONES ------------------------------------------------------------ Revealing the headline above exposed a second parent-theme bug in the same spot. Three rules compete for .blg-hero-main-title's font-size, all !important: (default) clamp(3rem, 6.5vw, 7.5rem) max-width: 480px clamp(2.2rem, 18vw, 3.5rem) <- sized for narrow screens max-height: 850px clamp(2.5rem, 10vh, 5.5rem) <- sized for SHORT screens All three have equal specificity, so the LAST one in the stylesheet wins ties — which happens to be the max-height rule. On a normal tall-narrow phone (e.g. 375×812) both the max-width:480px and max-height:850px conditions are true at once, but the max-height rule's 10vh formula was written assuming a short/landscape viewport; on a tall portrait phone it computes a huge font (10vh of 812px ≈ 81px) that doesn't fit in a 375px-wide line, so the title clips off-screen instead of wrapping. Re-declaring the max-width:480px rule here (same selector, same specificity, !important) makes IT the last one instead, since this file is enqueued after the parent's main.css — restoring the width-based sizing that actually fits narrow phones, regardless of viewport height. ============================================================ */ @media (max-width: 480px) { .blg-hero-main-title { font-size: clamp(2.2rem, 18vw, 3.5rem) !important; } } /* ============================================================ 6. MOBILE-ONLY CLICKABLE "SCROLL DOWN" HINT ON THE COVER ------------------------------------------------------------ A bouncing chevron button, injected into .blg-cover by the small script in functions.php (romanfront_child_scroll_hint_button), shown only in the same max-width: 1024px range where the layout stacks cover-above-feed — i.e. exactly when a visitor could plausibly not realize there's more content below. On desktop's side-by-side split view both columns are already visible, so the hint stays hidden there. It's a real