---
feed: "CLAUDE_PERSPECTIVE"
source: Claude
thread_id: "Claude-thread-2026-03-29-123"
date: "2026-03-29"
time: "00:53"
source_uuid: "carousel_i"
thread_type: "Substantive"
content_status: "active"
message_count: 10
category: ["Web Development", "CSS / HTML", "Scotomaville.com", "DNN / Tahoe Theme"]
summary: "Daniel needs to fix a carousel layout so icon circles overlap a map/contours image above, with the dark background aligning at circle midpoints; Claude diagnoses double negative-margin conflict, produces complete corrected code, then solves a series of follow-on CSS challenges including mobile portrait height reduction without external stylesheets (constraint: content is shared across 500+ websites), PC/mobile text sizing differential, and float-clearfix for Tahoe call-to-action shortcodes."
keypoints:
- "Core problem: double margin-top:-50px conflict (one on outer container, one on inner owl-carousel) cancelling each other — fix is single negative margin on outer div only"
- "Banner wrapper fix: position:relative; overflow:visible needed so carousel isn't clipped by image container"
- "Mobile portrait height reduction challenge: content shared across 500+ websites means no external stylesheet — solution must be inline-only"
- "Viewport unit trick: min(9vw, 7vh) for font-size self-corrects on portrait mobile without media query (vmin/vmax orientation behavior exploited)"
- "PC drama vs. mobile brevity tension: min() solution crushes PC text; alternative — embedded
```
**Daniel:**
The content is shared across 500+ websites, and passed as written, so we have to be creative so there are no other styles to paste into any single page
**Claude:**
Good constraint. Using `min(9vw, 7vh)` exploits portrait vs. landscape `vh` behavior to reduce size on portrait mobile without a media query — all inline:
```html
```
**Daniel:**
That crushes the large text on the PC which looses drama, just for gaining a tiny bit of screen scroll on mobile.
**Claude:**
Yes — exactly like the `` / `` pattern below it. The clean solution: a `
```
[Corrected complete code with embedded style block produced]
**Daniel:**
I notice the call-to-action buttons are out of place. They float to the top of the page.
**Claude:**
[Live page fetched]
The buttons are there — they're being pushed off-screen to the right on desktop because the Tahoe `call-to-action` shortcode floats `.call-to-action-btn` to the right, but the `overflow:hidden` wrapper is clipping it at the viewport edge.
**Daniel:**
The call-to-action buttons on the centered ones work in all cases, so we do not need to abandon them altogether. Also be certain to keep the first heading and text as it was.
**Claude:**
The centered variant (`button-centered` class) works because it doesn't use floats at all. Use `call-to-action-primary button-centered` and the problem disappears without abandoning the shortcode.
[Complete corrected snippet with centered call-to-action and preserved heading produced]
---
## Backlinks & Cross-Node Syndication Notes
No syndication value. Technical CSS infrastructure.
Concurrent threads:
- Thread 122 (2026-03-29, 00:47) — empty ghost thread 6 minutes prior
- Thread 124 (2026-03-29, 17:41) — IPG framework market distinctions (same day, afternoon)
---
*Claude-thread-2026-03-29-123_carousel_icon_overlap_positioning.md*
*Initium Principia Gnosis · MA5 Council · Claude · Axial Refinement Sherpa*
*CC BY-NC-SA 4.0 · github.com/scotomaville/initium*