Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Problema con Mediaquery Background color copre immagine

    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?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,755
    Ciao, ci sono vari fattori. Quella descrizione sta in un div (.text) che eredita (da un suo genitore) questa regola:
    codice:
    #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:
    codice:
    .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.
    Ultima modifica di KillerWorm; 08-07-2020 a 16:44
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

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

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.