💪 JAVASCRIPT: Forza Assoluta Contenuti Desktop (NUCLEAR)

💪 SOLUZIONE JAVASCRIPT – FORZA ASSOLUTA

⚡ CODICE JAVASCRIPT + CSS:

</p> <style> /* CSS di supporto */ @media screen and (min-width: 768px) { .compressed-desktop { margin-top: -20px !important; margin-bottom: -15px !important; padding-top: 5px !important; padding-bottom: 5px !important; }</p> <p> .compressed-desktop p { margin: 0 0 5px 0 !important; line-height: 1.4 !important; }</p> <p> .compressed-desktop h1, .compressed-desktop h2, .compressed-desktop h3 { margin: 0 0 3px 0 !important; }</p> <p> /* Preserva immagine donna */ img[src*="person-hero-2.png"] { margin: 20px auto !important; padding: 20px !important; } } </style> <p><script> // JAVASCRIPT che FORZA gli stili solo su desktop function compressDesktopContent() { // Solo se siamo su desktop if (window.innerWidth >= 768) {</p> <p> // Seleziona tutti gli elementi da comprimere const elements = document.querySelectorAll('.wp-block-group, .wp-block-columns, .wp-block-cover, p, h1, h2, h3, .container, .neve-main, .elementor-section');</p> <p> elements.forEach(element => { // Non toccare l'immagine della donna if (!element.querySelector('img[src*="person-hero"]') && !element.closest('.wp-block-image')) {</p> <p> // FORZA gli stili element.style.setProperty('margin-top', '-20px', 'important'); element.style.setProperty('margin-bottom', '-15px', 'important'); element.style.setProperty('padding-top', '5px', 'important'); element.style.setProperty('padding-bottom', '5px', 'important');</p> <p> // Aggiungi classe per CSS element.classList.add('compressed-desktop'); } });</p> <p> // Forza i paragrafi const paragraphs = document.querySelectorAll('p'); paragraphs.forEach(p => { if (!p.closest('.wp-block-image')) { p.style.setProperty('margin', '0 0 5px 0', 'important'); p.style.setProperty('line-height', '1.4', 'important'); } });</p> <p> // Forza i titoli const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6'); headings.forEach(h => { if (!h.closest('.wp-block-image')) { h.style.setProperty('margin', '0 0 3px 0', 'important'); h.style.setProperty('padding', '2px 0', 'important'); } });</p> <p> // Preserva esplicitamente l'immagine della donna const personImg = document.querySelector('img[src*="person-hero-2.png"]'); if (personImg) { personImg.style.setProperty('margin', '20px auto', 'important'); personImg.style.setProperty('padding', '20px', 'important'); personImg.style.setProperty('display', 'block', 'important');</p> <p> // Preserva anche il container dell'immagine const imgContainer = personImg.closest('.wp-block-image') || personImg.closest('.wp-block-group'); if (imgContainer) { imgContainer.style.setProperty('margin', '20px auto', 'important'); imgContainer.style.setProperty('padding', '20px', 'important'); imgContainer.classList.remove('compressed-desktop'); } }</p> <p> console.log('✅ Contenuti desktop compressi con JavaScript!'); } }</p> <p>// Esegui quando la pagina è caricata document.addEventListener('DOMContentLoaded', compressDesktopContent);</p> <p>// Esegui anche se la finestra viene ridimensionata window.addEventListener('resize', function() { if (window.innerWidth >= 768) { compressDesktopContent(); } });</p> <p>// Esegui immediatamente se il DOM è già pronto if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', compressDesktopContent); } else { compressDesktopContent(); } </script><br />

🛠️ COME IMPLEMENTARE:

// Aggiungi al functions.php del tema child
function add_desktop_compress_script() {
    if (!wp_is_mobile()) { // Solo desktop
        ?>
        [IL CODICE SOPRA VA QUI]
        

🔥 VERSIONE ANCORA PIÙ AGGRESSIVA:

<br /> <script> // VERSIONE NUCLEAR - Se anche la precedente non funziona function nuclearCompress() { if (window.innerWidth >= 768) { // FORZA TUTTI gli elementi const allElements = document.querySelectorAll('*'); allElements.forEach(el => { // Salta solo l'immagine della donna if (!el.src || !el.src.includes('person-hero')) { el.style.setProperty('margin-top', '0', 'important'); el.style.setProperty('margin-bottom', '3px', 'important'); el.style.setProperty('padding-top', '2px', 'important'); el.style.setProperty('padding-bottom', '2px', 'important'); } });</p> <p> // Preserva immagine donna const personImg = document.querySelector('img[src*="person-hero"]'); if (personImg) { personImg.style.setProperty('margin', '20px auto', 'important'); personImg.style.setProperty('padding', '20px', 'important'); } } }</p> <p>document.addEventListener('DOMContentLoaded', nuclearCompress); </script><br />

✅ VANTAGGI DEL JAVASCRIPT:

• 🎯 Forza Assoluta: Nessun CSS può sovrascrivere
• 📱 Solo Desktop: Controlla la larghezza della finestra
• 👩 Preserva Donna: Identifica e protegge l'immagine
• ⚡ Dinamico: Si adatta a ridimensionamenti
• 🔍 Debug: Mostra messaggio in console se funziona