Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2014
    Messaggi
    67

    modificare font size su mobile

    ciao a tutti, ho un problema che non riesco a risolvere da solo, non sono molto pratico di html...sul sito https://musicaperiltuomatrimonio.it/ ho una riga h2 che vorrei ridimensionare solo su mobile perchè il nome è troppo ungo "musicaperiltuomatrimonio.it" e facendo l'anailisi dell'elemento non riesco a capire cosa inserire nel custom css del tema di wp che utilizzo.
    La riga incirimnata si torva subito sotto l'immagine di testa e si chiama musicaperitluomatrimonio.it
    e sotto c'è scritto "la musica per matrimoni a salerno" mi sapreste aiutare?

  2. #2
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,395
    devi sfruttare l'opportunità che ti è offerta da un layout responsivo.
    nelle personalizzazioni css del tuo tema (visto che stai lavorando con wp) puoi settare un cosa tipo:
    codice:
    @media only screen and (max-width: 600px)
    h2 {
        font-size: 16px;
    }
    i valori li setterai a tuo piacimento

  3. #3
    Utente di HTML.it
    Registrato dal
    Apr 2014
    Messaggi
    67
    grazie Vincent, in effetti ho risolto, ora però ho lo stesso problema su un'immagine (gli spos che si abbracciano per intenderci) alla pagina https://musicaperiltuomatrimonio.it/prov/ . in pratica l'immagine che ho nell'header vorrei fosse un po' più grande su mobile. Perciò ho inserito
    codice:
    @media only screen and (max-width: 600px) {
    .wpb_content_element.wpb_single_image img {
        vertical-align: middle;
    }
    .wpb_single_image img {
     
        height: 500px;
        max-width: 100%;
        vertical-align: top;
    }
    }
    modificando quindi solo l'altezza, che è ciò che mi interessa, però questa regola poi viene applicata atutte le immagini della pagina e chiaramente questo è un problema. Ho fatto l'ispezione dell'elemento ma è uguale per tutte le immagini e quindi chiaramente cambiando il valore cambia a tutte le immagini. Come posso fare

  4. #4
    Utente di HTML.it
    Registrato dal
    Apr 2014
    Messaggi
    67
    preciso che la pagina è questa di prova https://musicaperiltuomatrimonio.it/prov/

  5. #5
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,395
    il tema ti consente di aggiungere un classe solo per l'immagine in questione?

  6. #6
    Utente di HTML.it
    Registrato dal
    Apr 2014
    Messaggi
    67
    si cioè uso visual composer wp bakery, e nell'immagine posso inserire "nome classe extra" e "element ID"
    ho provato ad aggiungere in nome classe extra
    codice:
    @media only screen and (max-width: 600px) {
    .wpb_content_element.wpb_single_image img {
        vertical-align: middle;
    }
    .wpb_single_image img {
     
        height: 500px;
        max-width: 100%;
        vertical-align: top;
    }
    }
    ma non funziona

  7. #7
    Utente di HTML.it
    Registrato dal
    Apr 2014
    Messaggi
    67
    non ho risolto però mi son accorto di aver sbagliato tugtto...allora ho seguito questa guida https://www.youtube.com/watch?v=XUY31LqjGrA di visual composer, quindi ho cliccato sull'immagine da mofificare e nel campo extra class name ho inserito "my-image" , poi nel custom csss della pagina ho inserito
    codice:
    @media only screen and (max-width: 600px) {
    .my-image {
         height: 1000px;
    }
    }
    salveto tutto, ma comunque nn funziona, cosa sbaglio?


    edit: mi sembra che funzioni non mi ero accorto della larghezza
    Ultima modifica di ludo13; 18-12-2019 a 21:50

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.