Problema con Mediaquery Background color copre immagine

[alexander1983]

Buonasera,

ho pensato di implementare nel mio sito (però al momento sta dentro una pagina prova) una slideshow.
ho inserito il codice.. lo stile in un foglio a parte e richiamato nella head.

Ho inserito anche qualche pezzo di mediaquery.
Ma non capisco come mai visto su MOBILE la banda ORO delle scritte copre le foto se la risoluazione si va rimpicciolendo.

ecco il link https://www.la-maglia-rosanero.com/index2.asp

soluzioni?

[KillerWorm]

Ciao, ci sono vari fattori. Quella descrizione sta in un div (.text) che eredita (da un suo genitore) questa regola:

#boxmaglieultime {
    list-style-type: none;
    line-height: 35px;
}

In particolare quel valore in px di line-height viene mantenuto anche quando il tutto viene ridotto. Questo crea un'interlinea eccessiva quando il carattere viene ridotto con la riduzione della pagina; per cui quel div (.text) risulta di dimensioni inadeguate.

Altro fattore è il fatto che la dimensione del carattere non si riduce in maniera lineare assieme alla dimensione dell'immagine (e quindi del div che contiene entrambe, immagine e descrizione), per cui, riducendo la pagina, avviene che in diversi step il testo si porta su più righe, mentre su desktop si vede magari su un'unica riga; di conseguenza la banda oro risulta chiaramente più alta del necessario e va a coprire l'immagine posta al di sotto.

Una soluzione quindi può essere quella di impostare una regola per il div descrizione (.text), in cui porre un ine-height percentuale o numerico (basato quindi sulla reale dimensione del carattere), ad esempio potrebbe andare bene un valore tra 1 e 1.5.

Per dare priorità all'area dell'immagine potresti inoltre pensare di ridurre il padding di quel div .text, in particolare per mobile.

Potresti inoltre pensare di portare più in basso il div descrizione, impostando ad esempio come default uno spazio di tot pixel sotto l'immagine in modo da limitare la sovrapposizione della descrizione sull'immagine.
Potresti ad esempio impostare un padding-bottom per il contenitore .fade, in un modo del genere:

.fade {
    padding-bottom: 40px;
}

supponendo che quei 40px possano corrispondere grosso modo all'altezza minima della banda oro.

Ti avrei consigliato di eliminare il position absolute da quel div in modo che la descrizione risulti posta sotto l'immagine, cioè subito dopo, lasciando quindi il div (.text) libero di espandersi verso il basso ed evitando che l'immagine risulti coperta, ma questo potrebbe produrre un effetto sgradevole perché ciascuna descrizione può avere una differente altezza e il contenuto dopo lo slideshow si sposterebbe ripetutamente per assecondare di volta in volta l'altezza relativa alla descrizione visibile.

Ovviamente si potrebbero utilizzare vari altri accorgimenti ma per il momento vedi se possono essere sufficienti questi pochi consigli.

[alexander1983]

Ciao per tagliare la testa al toro ho tolto la descrizione.
Grazie mille comunque