Device Selector Test - Wanderlust Travel

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: #f8f9fa; min-height: 100vh; } /* ===================== RESPONSIVE NAVIGATION ===================== */ nav { background: white; padding: 12px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; } nav .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } nav .logo { font-size: 20px; font-weight: bold; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } nav ul { list-style: none; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } nav a { text-decoration: none; color: #2d3748; font-weight: 500; transition: color 0.2s; font-size: 13px; } nav a:hover { color: #667eea; } .container { max-width: 1200px; margin: 0 auto; padding: 15px; } /* ===================== TEST INFO BANNER ===================== */ .test-banner { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: white; padding: 15px; margin-bottom: 15px; border-radius: 8px; } .test-banner h3 { margin-bottom: 8px; font-size: 16px; } .test-banner p { font-size: 13px; opacity: 0.9; line-height: 1.4; } .test-banner code { background: rgba(255,255,255,0.2); padding: 2px 6px; border-radius: 3px; } /* ===================== DEVICE INFO PANELS ===================== */ .info-panels { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 15px; } .device-info, .selector-counter, .body-class-display { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); color: white; padding: 12px 15px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 12px; } .device-info .row { display: flex; flex-direction: column; gap: 8px; } .device-info .label { color: #a0aec0; } .device-info .value { color: #48bb78; font-weight: bold; } .body-class-display { background: #1a1a2e; } .body-class-display .class-list { color: #00ff88; word-break: break-all; } /* ===================== SELECTOR COUNTER ===================== */ .selector-counter h4 { margin-bottom: 10px; color: #3498db; font-size: 14px; } .counter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .counter-item { background: #34495e; padding: 10px; border-radius: 6px; text-align: center; } .counter-item .selector-name { font-family: 'Courier New', monospace; color: #e74c3c; font-size: 10px; margin-bottom: 5px; word-break: break-all; } .counter-item .count { font-size: 20px; font-weight: bold; color: #2ecc71; } /* ===================== CONTROL BUTTONS ===================== */ .controls { display: flex; gap: 8px; margin-bottom: 15px; flex-wrap: wrap; } .controls button { padding: 8px 12px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-size: 12px; flex: 1; min-width: 100px; } .controls button.highlight-btn { background: #e74c3c; color: white; } .controls button.count-btn { background: #3498db; color: white; } .controls button.refresh-btn { background: #2ecc71; color: white; } /* ======================================== THE PROBLEM SCENARIO: .promo-badge class appears on BOTH devices but in DIFFERENT quantities Desktop: 8 badges (all cards visible) Mobile: 2 badges (only featured cards) ======================================== */ /* Section Title */ .section-title { font-size: 24px; color: #2d3748; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #667eea; } /* Card Grid - Shows all 8 cards on desktop */ .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 30px; } .deal-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: transform 0.2s; } .deal-card:hover { transform: translateY(-3px); } .deal-card .image { height: 120px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; font-size: 40px; position: relative; } /* ============================================= THIS IS THE PROBLEM SELECTOR: .promo-badge - Visible on BOTH desktop and mobile - Desktop shows 8 badges - Mobile shows only 2 badges If user targets this on desktop and changes color to RED, the same selector on mobile will also turn RED — but they only see 2! ============================================= */ .promo-badge { position: absolute; top: 10px; right: 10px; background: #e74c3c; color: white; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: bold; text-transform: uppercase; } .deal-card .content { padding: 15px; } .deal-card h3 { font-size: 16px; color: #2d3748; margin-bottom: 8px; } .deal-card .price { color: #667eea; font-weight: bold; font-size: 18px; } .deal-card .price span { color: #a0aec0; font-size: 12px; font-weight: normal; } /* Featured badge - also demonstrates the problem */ .featured-tag { display: inline-block; background: #f6e05e; color: #744210; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: bold; margin-bottom: 8px; } /* ===================== CTA BUTTONS - Another problem selector .cta-button appears 8 times on desktop but only 2 on mobile ===================== */ .cta-button { display: block; width: 100%; padding: 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; text-align: center; font-size: 13px; margin-top: 10px; } /* ===================== MOBILE RESPONSIVE Hide cards 3-8 on mobile Only show first 2 "featured" cards ===================== */ @media (max-width: 768px) { nav .logo { font-size: 18px; } nav ul { gap: 8px; justify-content: center; width: 100%; } nav a { font-size: 12px; } .container { padding: 10px; } .test-banner h3 { font-size: 14px; } .test-banner p { font-size: 12px; } .section-title { font-size: 18px; } /* MOBILE: Show only 2 cards in single column */ .card-grid { grid-template-columns: 1fr; gap: 12px; } /* Hide cards 3-8 on mobile - this creates the selector conflict! */ .deal-card:nth-child(n+3) { display: none; } .deal-card .image { height: 100px; } .counter-grid { grid-template-columns: 1fr 1fr; } .counter-item .selector-name { font-size: 9px; } .counter-item .count { font-size: 18px; } } /* ===================== EXPECTED COUNTS TABLE ===================== */ .expected-table { background: #fff3cd; border: 1px solid #ffc107; padding: 15px; border-radius: 8px; margin-top: 20px; overflow-x: auto; } .expected-table h4 { color: #856404; margin-bottom: 10px; font-size: 14px; } .expected-table table { width: 100%; border-collapse: collapse; font-size: 12px; } .expected-table th { background: #ffc107; color: #856404; padding: 8px; text-align: left; } .expected-table td { padding: 8px; border-bottom: 1px solid #ffeaa7; } .expected-table .highlight { background: #ffe066; font-weight: bold; } .expected-table .problem { color: #e74c3c; font-weight: bold; } /* ===================== TEST SCENARIO BOX ===================== */ .scenario-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 12px; margin-bottom: 20px; } .scenario-box h3 { margin-bottom: 15px; font-size: 18px; } .scenario-box .step { background: rgba(255,255,255,0.15); padding: 12px; border-radius: 8px; margin-bottom: 10px; } .scenario-box .step:last-child { margin-bottom: 0; } .scenario-box .step-num { display: inline-block; background: white; color: #667eea; width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 24px; font-weight: bold; margin-right: 10px; font-size: 12px; } .scenario-box code { background: rgba(0,0,0,0.3); padding: 2px 8px; border-radius: 4px; font-family: 'Courier New', monospace; } /* Highlight for testing */ .highlight-promo-badge .promo-badge { outline: 3px solid #00ff00 !important; outline-offset: 2px; } .highlight-cta-button .cta-button { outline: 3px solid #ff00ff !important; outline-offset: 2px; }

🎯 Test Scenario: Reproduce the Problem

1 On Desktop: Use Visual Editor to select .promo-badge and change background to GREEN

2 Save without device lock (or "All Devices")

3 Check Mobile: The 2 visible badges also turn GREEN — unintended!

4 Solution: Lock the change to "Desktop Only" — mobile stays original RED

Viewport: --

Device: --

Body Classes: Detecting...

📊 Live Element Count

.promo-badge

.cta-button

.deal-card

.featured-tag

🔥 Hot Deals

🏝️

⭐ FEATURED

Bali Paradise

$899 per person

🗼

⭐ FEATURED

Paris Romance

$1,299 per person

🏔️

Swiss Alps

$1,799 per person

🌴

Maldives Luxury

$2,499 per person

🎰

Las Vegas

$699 per person

🗽

New York City

$999 per person

⛩️

Tokyo Adventure

$1,599 per person

🏰

London Explorer

$1,199 per person

📋 Selector Conflict Reference

Selector	Desktop	Mobile	Problem
`.promo-badge`	8	2	⚠️ CONFLICT
`.cta-button`	8	2	⚠️ CONFLICT
`.deal-card`	8	2	⚠️ CONFLICT
`.featured-tag`	2	2	✅ Same count

The Problem: User sees 8 badges on desktop, changes color. Same change applies to mobile's 2 badges unexpectedly.
The Solution: Lock change to "Desktop Only" so mobile remains unaffected.

🧪 Device Selector Conflict Test Page