Ich bin so neu in CSS und versuche, den folgenden Code zu korrigieren. Ich möchte eine einfache Sache, bei der die Bildschirmgröße kleiner als 400 ist. Ändern Sie die Bildgröße. Es sollte funktionieren, aber es funktioniert nicht. Ich habe versucht, es zu machen

* {
    box-sizing: border-box;
} 

body, html {
    background: #fff;
    height: 100%;
    margin: 10px;
}

.left__img2 {
    position: absolute;
    float: left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 20px;
    width: 600px;
    height: 400px; 
} 


@media screen and (max-width: 500px) {
.left__img2 {
    width: 10px;
} 
}
0
Ak2019 18 Jän. 2019 im 05:25

3 Antworten

Beste Antwort

Medienabfragen am oberen Rand des CSS müssen wichtig sein, um die Medienabfrage zu übersteuern. Medienabfragen unten brauchen nicht! Wichtig. Ich habe die Abfrage oben platziert, also habe ich! Wichtig verwendet, um jeden anderen Stil danach zu überschreiben.

@media screen and (max-width: 500px) {
.left__img2 {
width: 10px !important;
} 
}

* {
box-sizing: border-box;
} 

body, html {
background: #fff;
height: 100%;
margin: 10px;
}

.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px; 
} 
-1
Jonny 18 Jän. 2019 im 14:10

Ich denke das wird funktionieren.

@media screen and (max-width: 500px) {
.left__img2 {
    max-width: 10px;
} 
}
-1
tdrsam 18 Jän. 2019 im 04:06

Ihr Code funktioniert im folgenden Beispiel gut (Größe Ihres Fensters ändern) . Vielleicht ist er auf einen Nebeneffekt des restlichen Codes zurückzuführen. Können Sie uns den Rest Ihres Codes zeigen?

.left__img2 {
    position: absolute;
    float: left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 20px;
    width: 600px;
    height: 400px; 
    background-color: red;
} 


@media screen and (max-width: 500px) {
.left__img2 {
    width: 10px;
    background-color: yellow;
} 
<div class="left__img2"><div>
-1
Maarti 18 Jän. 2019 im 14:17