2016-09-24 5 views
0

Ich habe eine Website (ziemlich neu zu HTML/CSS) gemacht und bestimmte @ Media-Abfragen funktionieren nicht. Idee ist Container1 anzuzeigen 95% des Bildschirms, auf einem Bildschirm weniger als 500px ..@media Bildschirmabfrage funktioniert nicht

Vielen Dank im Voraus!

Siehe Code unten:

#container1 { 
    float: left; 
    max-width: 45%; 
    min-height: 320px; 
    padding:20px; 
    margin: 1px; 
    border: solid #ffffff; 

} 

#container1:hover { border:solid #000000; 
} 
#container1:hover { background-color: antiquewhite; 
} 

@media screen and (max-width: 500px) { 

    #container1 { 
    width: 95%; 
} 
} 
+0

PS: Ich habe in HTML enthalten. – gazywazy

+0

die max-width: 45% würde immer noch für den # container1 gelten, wenn der Bildschirm kleiner als 500px ist, müssen Sie max-width: none; in der Medienabfrage. – Fionna

+0

pps: es funktioniert auch auf einem anderen div OK, mit den gleichen Aussagen – gazywazy

Antwort

1

Sie haben max-width: 45%; Satz auf sie in einer früheren Erklärung. Wechseln zu:

@media screen and (max-width: 500px) { 

    #container1 { 
     width: 95%; 
     max-width: none; 
    } 
} 
+0

Vielen Dank. Offensichtlich jetzt! – gazywazy

0

Sie müssen auch die maximale Breite überschreiben! Sonst max-Breite: 45%; ist immer noch aktiv.