git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix CTA: Agregar !important para sobrescribir Bootstrap - Issue #126

Browse Source 
PROBLEMA:
Bootstrap estaba sobrescribiendo los estilos de cta.css:
- .btn-lg (Bootstrap) sobrescribía font-size y padding del botón
- .h4 (Bootstrap) sobrescribía font-size del h3

DIAGNÓSTICO CON CHROME DEVTOOLS MCP:
Comparación Template vs Staging:
┌──────────────────┬─────────────┬─────────────┬────────────┐
│ Propiedad        │ Template    │ Staging     │ Esperado   │
├──────────────────┼─────────────┼─────────────┼────────────┤
│ Button fontSize  │ 20px        │ 16.8px ❌   │ 20px       │
│ Button padding   │ 12px 32px   │ 14px 28px❌ │ 12px 32px  │
│ h3 fontSize      │ 24px        │ 28px ❌     │ 24px       │
│ p fontSize       │ 16px        │ 16.8px ❌   │ 16px       │
└──────────────────┴─────────────┴─────────────┴────────────┘

CAUSA:
- cta.css se carga DESPUÉS de Bootstrap ✓
- PERO Bootstrap usa clases (.btn-lg, .h4) que tienen mayor especificidad
- Template HTML usa las mismas clases, pero el CSS está en style.css

SOLUCIÓN:
Agregar !important a propiedades que Bootstrap sobrescribe:

1. .cta-section h3:
   - font-size: 1.5rem !important; (24px)

2. .cta-section p:
   - font-size: 1rem !important; (16px)

3. .cta-button:
   - font-size: 1.25rem !important; (20px) ← NUEVO
   - padding: 0.75rem 2rem !important; (12px 32px)

RESULTADO:
Estilos ahora coinciden EXACTAMENTE con el template:
- h3: 24px ✓
- p: 16px ✓
- Button: 20px, padding 12px 32px ✓

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-08 15:58:06 -06:00
parent b353b5eb04
commit 760ad792f6
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
wp-content/themes/apus-theme/assets/css/cta.css
View File

@@ -44,13 +44,13 @@
.cta-section h3 { .cta-section h3 {
color: #ffffff !important; color: #ffffff !important;
font-size: 1.5rem; font-size: 1.5rem !important;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.cta-section p { .cta-section p {
color: rgba(255, 255, 255, 0.95) !important; color: rgba(255, 255, 255, 0.95) !important;
font-size: 1rem; font-size: 1rem !important;
line-height: 1.6; line-height: 1.6;
} }
@@ -61,8 +61,9 @@
.cta-button { .cta-button {
background-color: var(--color-orange-primary) !important; background-color: var(--color-orange-primary) !important;
color: #ffffff !important; color: #ffffff !important;
font-size: 1.25rem !important;
font-weight: 600; font-weight: 600;
padding: 0.75rem 2rem; padding: 0.75rem 2rem !important;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
transition: all 0.3s ease; transition: all 0.3s ease;