/* ========================================================================== MOBILE FIXES — Eoin O'Hara Coaching site -------------------------------------------------------------------------- Where to put this: Framer → Site Settings → General → Custom Code → "End of tag" Wrap it in when you paste it there. Why a separate file instead of editing the exported HTML: The exported HTML's CSS classes (framer-xxxxx) are auto-generated and are wired up to Framer's animation JavaScript by exact name. Renaming/rewriting that code would break the animations, and Framer overwrites the exported file every time you republish anyway. This file only ADDS narrow, mobile-only overrides on top of it, so it survives republishing and is easy to read/maintain. Most of this is scoped to max-width: 809.98px (Framer's own "Phone" breakpoint) and only touches mobile layouts. The donation-card fix near the bottom is the one exception — it applies at every width, see its own comment for why. ========================================================================== */ /* -------------------------------------------------------------------- FIX 4 (all widths) — donation card clipping its own content -------------------------------------------------------------------- Cause: the card (and the "Acquired Brain Injury Ireland" sub-card inside it) size themselves from a fixed aspect-ratio instead of their actual content, with overflow hidden. That was fine while the content was short enough to fit, but the charity logo added to the sub-card made it taller than the aspect-ratio allows, so the description text and donate button get clipped off — at every screen width, not just mobile. Fix: let both cards size themselves to their content instead. -------------------------------------------------------------------- */ .framer-1d1zpmk { aspect-ratio: unset !important; height: auto !important; align-self: auto !important; } .framer-1slnn1t { aspect-ratio: unset !important; height: auto !important; } /* -------------------------------------------------------------------- FIX 4c (all widths) — donation sub-card content left-aligned instead of centred under the logo -------------------------------------------------------------------- Cause: the logo badge is centred by its container, but the heading/ description below it stretch to the full card width with left-aligned text, and the donate button (a sibling, not part of that centred column) is left-aligned by default too - so everything below the logo ends up flush left instead of matching it. -------------------------------------------------------------------- */ .framer-1slnn1t { align-items: center !important; } .framer-d2fal3 h4, .framer-1oohqg7 p { text-align: center !important; } /* A little breathing room around the "Supporting survivors..." line - the parent's 4px gap left it crammed between the heading and the button. */ .framer-1oohqg7 { margin: 10px 0 !important; } @media (max-width: 809.98px) { /* -------------------------------------------------------------------- FIX 1 — "Dublin" services card: text overflowed the bottom of the card -------------------------------------------------------------------- Cause: the Services grid forces every card into a fixed 200px row height on mobile, but the "Dublin" card's paragraph is longer than that, so the text spills out past the rounded corners. Fix: let the grid rows size themselves to their content instead of being locked to 200px, and let each card grow to fit its own text. -------------------------------------------------------------------- */ .framer-1tdn29w, .framer-3ttudc, .framer-mmm4ot { height: auto !important; grid-auto-rows: auto !important; grid-template-rows: none !important; } .framer-1qgpq17, .framer-ci7zq0, .framer-10txwor, .framer-14pt7uh, .framer-1ifs1lq, .framer-1jsm4lh, .framer-1uf98d9, .framer-10zkoku { height: auto !important; min-height: 200px !important; } /* -------------------------------------------------------------------- FIX 2 — "My Philosophy" quote card: huge gap above the quote -------------------------------------------------------------------- Cause: the card's flex parents are set up to stretch it to fill a tall column on mobile, pushing the icon and quote text apart. Fix: stop the card (and its wrapper) from stretching — let it size to its own content, then centre it in the section. -------------------------------------------------------------------- */ .framer-1yry3xg { height: auto !important; } .framer-1nfceph-container { flex: none !important; width: 100% !important; height: auto !important; display: flex !important; justify-content: center !important; } .framer-F9b34.framer-1r11atk { height: auto !important; min-height: 152px !important; } /* -------------------------------------------------------------------- FIX 3 — Charity section photos overlapping/cluttered -------------------------------------------------------------------- Cause: the two photos are placed with CSS Grid using fixed pixel widths and grid alignment ("place-self: start" / "start end") meant for a two-column desktop layout. On the single-column mobile grid they land on top of one another. Fix: switch this pair of images to a simple, stacked flex column so they sit cleanly one above the other. -------------------------------------------------------------------- */ .framer-651o01 { display: flex !important; flex-direction: column !important; align-items: center !important; aspect-ratio: unset !important; gap: 16px !important; } .framer-euedo3, .framer-fj7hxx { position: relative !important; place-self: unset !important; width: 100% !important; max-width: 320px !important; height: 300px !important; } /* -------------------------------------------------------------------- FIX 4b — donation card, mobile-only follow-up -------------------------------------------------------------------- The width/height fix above (FIX 4, applies at all widths) handles the aspect-ratio clipping everywhere. On top of that, mobile has two extra problems: the card's grid parent still keeps a fixed 2-row track height on this narrow layout, and the card itself is pinned to the far right of a 2-column grid area it no longer needs — take the parent out of grid layout altogether and let the card size to 100% of the mobile column instead. -------------------------------------------------------------------- */ .framer-3ttudc { display: block !important; height: auto !important; } .framer-1d1zpmk { width: 100% !important; max-width: 100% !important; grid-row: auto !important; grid-column: auto !important; justify-self: auto !important; } /* Its inner card also relies on "flex: 1 0 0" to fill a definite parent height (set by the desktop aspect-ratio). Now that the parent is auto-height, that flex-grow child has nothing to grow into and collapses to 0px, taking all of its own content with it. Let it size to its content instead. */ .framer-vt1u0r { flex: none !important; width: 100% !important; height: auto !important; } /* -------------------------------------------------------------------- FIX 5 — "Certified. Experienced. Committed." step list overflowing -------------------------------------------------------------------- Cause: this reusable "Step" component's heading and paragraph are hardcoded to a 544px desktop width with no responsive override, so on phones they run far past the right edge of the screen. Fix: let the text size to its (now full-width) column instead. -------------------------------------------------------------------- */ .framer-k0Ws2.framer-1cdle72, .framer-k0Ws2 .framer-gh8zhv, .framer-k0Ws2 .framer-x3x45w, .framer-k0Ws2 .framer-1m157jt { width: 100% !important; } }