Supporto » Aspetto = Temi » Problema visualizzazione su smartphone tema onetone

  • Ciao a tutti, spero di non sbagliare a chiedere il vostro aiuto.
    Ho chiesto aiuto anche sul forum in inglese ma invano, ora provo qui 🙂 .
    Ho creato questo sito con il tema onetone. Non si vede però bene nella visualizzazione piccola con gli smartphone, l’immagine non si restringe e rimane tagliata con il titolo illeggible. Avevo già aggiunto l’indicazione
    .moni {
    background-size: cover;
    background-attachment: fixed;
    }
    nel file css ma non si aggiorna in quanto il codice che tira su è questo, con la versione alla fine:

    <link rel=”stylesheet” id=”onetone-main-css” href=”http://www.mattiabarbieri.com/w/wp-content/themes/onetone/style.css?ver=1.7.5″ type=”text/css” media=”all”>
    e, non intendendomene abbastanza, non so come fare a farglielo aggiornare…
    Ho spiegato questo nel forum in inglese e mi hanno suggerito di aggiungere
    section.home-section-1 {
    background-size: cover;
    background-attachment: fixed;
    }
    sempre nel file style.css, l’ho fatto ma la situazione non cambia, l’immagine non si ridimensiona nella visualizzazione smartphone.
    Spero di non essere stata troppo confusionaria, vi ringrazio!
    valentina

Stai vedendo 12 repliche - dal 1 al 12 (di 12 totali)
  • Moderatore Cristiano Zanca

    (@cristianozanca)

    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

    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! 🙂

    @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

    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

    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

    Grazie mille Giancarlo!!! 🙂

Stai vedendo 12 repliche - dal 1 al 12 (di 12 totali)
  • Il topic ‘Problema visualizzazione su smartphone tema onetone’ è chiuso a nuove risposte.