Ciao @supervale ,
il suggerimento del forum inglese è giusto: aggiungere background-size: cover; e
background-attachment: fixed; alla sezione section.home-section-1 bisogna prima però fare un CHILD THEME affinché le modifiche abbiano effetto
Quelo che farei io è togliere il testo rosso incluso nell’immagine e metterlo come HTML, così lo puoi centrare su mobile e manipolarlo via CSS 😉
Altro suggerimento sarebbe quello di creare più versioni della tua immagine per i diversi breakpoint e usare le media queries per sostituire lo sfondo della tua section. In questo modo riesci a fornire anche immagini più leggere e non farai scaricare agli utenti mobile un’immagine di 240KB.
Ciao @supervale,
se riesci a seguire i consigli di Olegs sarebbe la cosa migliore.
Se non riesci e vuoi applicare i suggerimenti del forum inglese e di Cristiano devi aggiungere !important alle due regole (attenzione allo spazio prima di !important):
section.home-section-1 {
background-size: cover !important;
background-attachment: fixed !important;
}
Così ottieni che l’immagine copra tutta l’area a lei destinata senza essere deformata, ma a seconda della dimensione dello schermo potrebbe essere tagliata.
Se invece non vuoi che l’immagine venga tagliata devi sostituire cover con contain.
Giancarlo
Chi ha creato la discussione
supervale
(@supervale)
Grazie ad entrambi!
@olegs, il tuo secondo suggerimento è troppo complicato per le mie conoscenze. E ho paura anche quello di manipolare il testo sulla foto via css (prima era così, poi ho creato un’immagine unica pensando di semplificarmi la vita 😀 )
@cristiano, sto provando a creare un tema child come mi hai detto,…
Ho creato un file style.css con quelle istruzioni e l’ho caricato in una cartella -child.
Però, se ho capito bene, devo incluere anche il foglio di stile del genitore. PEr farlo ho letto:
Per fare ciò non si dovrebbe usare la funzione @import nel foglio di stile del tema child, ma la funzione wp_enqueue_style() nel file “functions.php”. Dovrete creare questo file nella cartella principale del vostro tema child, ed inserirvi il seguente codice:
<?php
add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_theme_style’ );
function enqueue_parent_theme_style() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}
“
Fatico a capire che significa… devo creare un file con questo codice e metterlo sempre nella cartella child? E come chiamo il file? Functions.php?
Grazie! 🙂
Chi ha creato la discussione
supervale
(@supervale)
@gmosso scusa, ho risposto senza leggere il tuo ultimo commento! Mi stai dicendo che il codice (con l’aggiunta di important) devo metterlo nel child come suggerito da Cristiano, ho capito bene?
Ciao,
le istruzioni per creare il tema child le trovi qui:
https://codex.wordpress.org/it:Temi_Child
Comunque si, il file functions.php (tutto minuscolo) lo devi creare nella cartella del tema child e lì dentro metti le righe di codice che trovi al link che ti ho mandato.
Invece il codice css che ti ho scritto devi metterlo nello style.css del child.
La regola aurea da seguire è sempre di non modificare mai nessun file del tema che usi, ma creare un tema child e fare le modifiche lì dentro.
Il motivo è che se modificassi direttamente il tema perderesti tutte le modifiche al primo aggiornamento.
Giancarlo
Chi ha creato la discussione
supervale
(@supervale)
Grazie gmosso! ora mi manderete a stendere perché nemmeno così si ridimensiona l’immagine sullo smartphone 😀
Penso di aver fatto tutto corretto, le vostre spiegazioni e la pagina di supporto erano chiare:
-cartella onetone-child allo stesso livello di onetone
– all’interno un file functions.php con dentro
<?php
add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_theme_style’ );
function enqueue_parent_theme_style() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}
-un altro file style.css con:
/*
Theme Name: One to one
Theme URI: http://example.com/
Description: Tema Child per il tema One to one
Author: Qui il vostro nome
Author URI: http://example.com/about/
Template: onetone
Version: 0.1.0
*/
section.home-section-1 {
background-size: cover;
background-attachment: fixed;
}
– INfine, attivato da admin il child.
Trovate qualche errore? Grazie per il vostro aiuto!
valentina
Ciao,
mancano i due !important, li devi aggiungere dopo cover e fixed come puoi vedere in una delle mie risposte. Il resto mi sembra OK.
Giancarlo
Chi ha creato la discussione
supervale
(@supervale)
Ehm… grazie e scusa! ::)
Ora tutto ok su Android, invece su ipad e iphone niente, immagine nera. Ho anche provato a mettere un segno nell’immagine in alto a sinistra per capire se magari me l’aveva solo ingigantita ma pare di no, non vedo neanche il segno.
Nel caso vi venisse ancora in mente qualcosa per questo… altrimenti grazie molte per l’aiuto fino a qui!! 🙂
Ciao,
la combinazione delle due regole css che hai aggiunto sui sistemi ios tipo iphone e ipad crea dei problemi che richiedono di intervenire anche sul codice html del tema.
Esistono soluzioni note al problema però a questo punto bisogna che vengano richieste al team di sviluppo del tema.
Ti consigliamo di rivolgerti a loro spiegando che hai implementato i loro suggerimenti, ma che hanno risolto solo parzialmente il problema.
Giancarlo
Chi ha creato la discussione
supervale
(@supervale)
Grazie mille Giancarlo!!! 🙂
