CSS Debug Test - PinPic Embed Page

Live Embed

Visual Checklist

Check these elements in the embed:

✓ Image loads and displays
□ Background is light gray (#f8f9fa)
□ Image has white container with shadow
□ Image has rounded corners (8px)
□ Red hotspot markers are visible
□ Hotspot markers are circular
□ Hotspot markers have white border
□ Clicking hotspot shows popup
□ Popup has white background
□ Popup has shadow
□ Popup has close button (X)
□ Popup title is bold and visible
□ Popup description text is readable
□ Buttons (if any) have proper styling

Known CSS Values:

Primary color: #2a9d8f
Background: #f8f9fa
Hotspot color: #ff6b6b
Border radius: 12px

Console Output

Open browser console (F12) to see any JavaScript errors.

Checking embed...

CSS Issues to Check

If CSS appears broken, check these specific issues:

Container Layout: Is the image centered? Does it have proper padding?
Hotspot Position: Are hotspots positioned correctly on the image?
Tooltip/Popup Style: Does the popup have proper:
- Background color (white)
- Border and shadow
- Padding (1rem)
- Font sizing
Interactive States: Do hotspots respond to hover? Does popup animation work?
Responsive Sizing: Does the image scale properly within the iframe?