Ask Daniel's CODEX · index

Ask Daniel's CODEX

Claude-thread-2026-03-29-123 — Carousel Icon Overlap Positioning

Claude-thread-2026-03-29-123 — Carousel Icon Overlap Positioning

CSS

Debugging · 500+ Website Inline-Only Constraint · Mobile Portrait / PC Tension Resolved

March 29, 2026, 00:53. Thread 123 of 162. Late-night CSS debugging for scotomaville.com syndication network. Key constraint: content shared across 500+ websites — no external stylesheets allowed.

Summary

Daniel needs a carousel layout where icon circles overlap a map/contours image above them, with the dark background starting at the circle midpoints. The current code has both the outer container and the inner owl-carousel element with margin-top:-50px — the double negative is fighting itself. Claude diagnoses the conflict, fixes it with a single negative margin on the outer div plus overflow:visible on the banner wrapper, and produces complete corrected code.

Follow-on CSS challenges:

Mobile portrait height reduction: The content is shared verbatim across 500+ websites — no external stylesheet can be added. All solutions must be inline. Claude tries the min(9vw, 7vh) viewport unit trick to self-correct on portrait without a media query, but Daniel correctly identifies it crushes PC text drama. Solution: embedded <style> block inline in the HTML module — DNN strips <style> from <head> but not from within module HTML content.

Float clearfix: Tahoe's call-to-action shortcode floats the button to the right; overflow:hidden clips it at the viewport edge on desktop, making buttons appear to vanish on laptop while showing on mobile (narrower viewport puts them back in range). Solution: switch to call-to-action-primary button-centered variant — uses no floats, works across all viewports.

Ten messages. Entirely technical. Late-night infrastructure work concurrent with the content architecture sessions of March 29.

Key Points

Full Conversation Thread (Preserved)

Daniel: Hello Claude. I'm trying to make this code look like the first screenshot. The code actually looks like the second.

I want to raise the carousel so that the icons overlap the contours image, and the background aligns with the middle of the icon circles.

[Code and screenshots provided]

Claude: Looking at the two screenshots, the difference is clear: in the target (image 1), the icon circles overlap the map image above, with the dark #333333 background starting roughly at the midpoint of the circles.

The key technique is using a negative margin-top on the container to pull it up over the banner image. The problem in your code: both the outer container <div> AND the inner owl-carousel have margin-top:-50px. That double-negative is pushing things down instead of up.

Fix:

Daniel: Please write the complete code for me. Thanks

Claude: [Complete corrected code produced]

The two key changes:

  1. Banner wrapper — added position:relative; overflow:visible so the carousel isn't clipped
  2. Carousel container — single margin:-45px auto 0 auto on the outer dark div; conflicting inner margin removed

Adjust the single -45px value if overlap needs fine-tuning.

Daniel: For this page top, I need the mobile vertical orientation to be 1/3 less tall. All other devices work ok.

[Code snippet provided]

Claude: The clamp(20px, 20vmin, 50px) padding and vw-based font sizes are the culprits on portrait mobile.

Fix using a media query: ``html <style> @media (max-width: 480px) and (orientation: portrait) { .ipg-header { padding: clamp(12px, 13vmin, 33px) !important; } .ipg-header h3 { font-size: 5.5vw !important; } .ipg-header h1 { font-size: 8vw !important; } } </style> ``

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 <h1 style="font-size: clamp(18px, min(9vw, 7vh), 72px); ..."> ``

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 <picture> / <source> pattern below it. The clean solution: a <style> block embedded right inside the HTML module. DNN and most CMS systems only strip <style> tags from <head> — inline in module HTML, they pass through fine:

``html <style> @media (max-width: 480px) and (orientation: portrait) { .ipg-top { padding: clamp(10px, 13vmin, 33px) !important; } .ipg-top h1 { font-size: 13vw !important; } } </style> <div class="ipg-top" style="..."> ``

[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:

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

Ask Daniel's CODEX