modificare font size su mobile

[ludo13]

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?

[Vincent.Zeno]

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:

@media only screen and (max-width: 600px)
h2 {
    font-size: 16px;
}

i valori li setterai a tuo piacimento

[ludo13]

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

@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

[ludo13]

preciso che la pagina è questa di prova https://musicaperiltuomatrimonio.it/prov/

[Vincent.Zeno]

il tema ti consente di aggiungere un classe solo per l'immagine in questione?

[ludo13]

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

@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

[ludo13]

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

@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