[Responsive] Media Query tralasciata

[Sari]

Ciao a tutti,

ragazzi ho un problema con la media query per la dimensione tablet. Non capisco per quale motivo non mi prende la regola in cui dico che l'intestazione h5, per la dimensione tablet, deve essere di 12px anziché 18px.

Vi posto qui il css per la media query in questione:

@media only screen and (min-width: 768px) and (max-width: 959px) {
h5 {
font-size: 12px
}
}

che viene tralasciata in favore di questa regola:


div.project-item div.thumb_large h5 {
margin-bottom: 3px;
padding:12px 10px 3px 6px;
font-size: 20px;
font-weight: bolder;
text-transform: capitalize;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
border-radius: 2px 2px;
color: rgba(255,255,255,1);
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: rgba(94,63,70,1);
text-shadow: -4px 2px 2px rgba(38,35,35,1) ;
-moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.8);
box-shadow: 0px 1px 5px rgba(0,0,0,0.8);
}

Non capisco, è l'assegnazione di classi che rende la seconda regola prioritaria alla prima?

Vi ringrazio tantissimo!
Sari

[KillerWorm]

Non capisco, è l'assegnazione di classi che rende la seconda regola prioritaria alla prima?

Ciao, sì, più esattamente l'ordine di priorità per l'applicazione delle regole viene definito attraverso un calcolo che comprende diversi fattori, tra cui l'indicazione della classe nel selettore.

Tenendo presente che prima di tutto incide l'ordine con cui sono riportate/lette le regole (per cui hanno priorità quelle che vengono dopo), potresti risolvere semplicemente indicando lo stesso selettore anche per la media query, quindi: div.project-item div.thumb_large h5.

In alternativa potresti usare la clausola !important ma generalmente viene sconsigliato, a favore di una più corretta impostazione del css.

[Sari]

potresti risolvere semplicemente indicando lo stesso selettore anche per la media query, quindi: div.project-item div.thumb_large h5.

Grazie KillerWorm,
Ho seguito il tuo consiglio e provato ad usare lo stesso selettore, e ancora niente: continua a tralasciarla. Ho anche inserito la media query dopo e non ho ottenuto alcun risultato. Mi sfugge qualcosa...

Eppure è un comando semplice di riduzione del font. Potrebbe essere la scelta dei px invece di em o percentuale?

[KillerWorm]

Ciao, a questo punto presumo che il problema sia altrove. Bisognerebbe vedere la tua pagina in azione per capire.
Se ti è possibile, posta il link della pagina pubblica, ti dirò dove sta il problema e come risolvere.

[Sari]

Ciao, a questo punto presumo che il problema sia altrove. Bisognerebbe vedere la tua pagina in azione per capire.
Se ti è possibile, posta il link della pagina pubblica, ti dirò dove sta il problema e come risolvere.

A te: http://sarafranchi.altervista.org/works/

[KillerWorm]

Bene.
Sul file style.css vedo che font-size per l'elemento h5 è definito in diversi punti, tra i quali (quelli che potrebbero essere rilevanti):

• Riga 516 (con media query):
  

  h5 {  font-size: 12px;}

• Riga 2356 (sempre con una media query uguale alla precedente):
  

  h5.projectitle {
      font-size: 12px;
  }

  Questo sovrascrive il precedente.
• Riga 1507:
  

  div.project-item div.thumb_large h5 {
  
  font-size: 20px;
  
  }

  Questo ha priorità su tutti gli altri per i motivi visti in precedenza.

Non vedo la modifica del selettore, con le classi specificate, come ti avevo indicato di provare. Se tu hai provato, ma senza successo, è probabile che tu abbia modificato la regola che è dichiarata prima delle altre. In particolare è possibile che tu abbia modificato la riga 516 ma senza ottenere risultati perché verrebbe comunque sovrascritta dalla 2356, o qualcosa del genere.

E' chiaro che la dichiarazione sparsa di regole duplicate comporti un po' di confusione, andando a sovrascriversi l'una con l'altra. L'ideale sarebbe fare un po' di pulizia togliendo quelle regole che non hanno motivo di esserci.

Ad ogni modo, puoi risolvere specificando in modo più dettagliato (con l'indicazione delle classi, come detto inizialmente) la regola sulla riga 2356.
Prova in questo modo:

div.project-item div.thumb_large h5.projectitle {
  font-size: 12px
}

Fammi sapere.

[Sari]

Si hai perfettamente ragione: nel frattempo ho fatto diverse modifiche, ho aggiunto regole su regole, cambiando via via selettori per verificare. Mi sono fermata proprio perché iniziavo a fare confusione. Ora lo ripulisco e cambio la media query aggiungendo la classe .projectitle. Ti faccio sapere e nel frattempo ti ringrazio per il tuo tempo e per la ventata di lucidità Grazie

[Sari]

GRAAAAAAAAAAAAAAZIEEEEEEEEEE ora funziona!!!

[KillerWorm]

Bene, mi fa piacere
Buon lavoro e un felice proseguimento.