Bildgröße lässt sich mit @media nicht ändern

[Terminator]

Hallo liebe Community,
ich bin Anfänger und hoffe auf eure Hilfe .
Ich würde gerne ein Bild verkleinern, wenn die Anzeige kleiner 700px ist. Die Bildgröße ändert sich nicht bei Verkleinerung des Browserfensters (die anderen @media queries funktionieren). Das ist der Code:
HTML
<section class="about-us">
<div class="row">
<div class="about-col">
<img src="image/img1.jpg">
<div>
<p>Lorem ipsum dolor...</p>
<h3>name1</h3>
</div>
</div>
<div class="about-col">
<img src="image/img2.jpg">
<div>
<p>Lorem ipsum dolor...</p>
<h3>name2</h3>
</div>
</div>
</div>
</section>

CSS
.about-col img{
height: 150px;
margin-right: 30px;
border-radius: 50%;
}

@media(max-width: 700px){
.about-col img{
height: 70px;
margin-right: 30px;
}
}

Hoffe es ist verständlich.
Danke vorab!!!

 

[Sempervivum]

Bei mir funktioniert dieser Code einwandfrei, bei 700px verkleinern sich die Bilder. Ist da noch anderes CSS im Spiel, das das Ganze ausbremsen könnte? Wenn Du die vollständige Seite online hast, dann poste am besten die URL.

 

[Terminator]

Bei mir funktioniert dieser Code einwandfrei, bei 700px verkleinern sich die Bilder. Ist da noch anderes CSS im Spiel, das das Ganze ausbremsen könnte? Wenn Du die vollständige Seite online hast, dann poste am besten die URL.

Hab die Seite leider nicht online. Müsste das mutmaßlich blockierende CSS in @media sein?

 

[Sempervivum]

Müsste das mutmaßlich blockierende CSS in @media sein?

Nicht unbedingt, es kann genau so gut außerhalb sein, wenn es das, was Du gepostet hast, überschreibt. Um Bootstrap handelt es sich nicht?
Wenn Du das selbst in die Hand nehmen willst, dann benutze den Seiteninspektor:
https://wiki.selfhtml.org/wiki/Grundlagen/Webprojekte/testen#Arbeiten_mit_dem_Seiteninspektor
Der zeigt dir zum HTML das wirksame CSS an und man erkennt, was etwas anders überschreibt.

 

[Terminator]

Wenn Du das selbst in die Hand nehmen willst, dann benutze den Seiteninspektor:
https://wiki.selfhtml.org/wiki/Grundlagen/Webprojekte/testen#Arbeiten_mit_dem_Seiteninspektor
Der zeigt dir zum HTML das wirksame CSS an und man erkennt, was etwas anders überschreibt.

Danke für den Link, das muss ich mir mal anschauen. Ich kenne die Funktion, bin aber noch nicht vertraut damit...
Aber nachdem du mir gesagt hast, das der Code bei dir funktioniert, habe ich mal alle anderen CSS rausgelöscht, und siehe da, dann funktionierte es auch bei mir. Hab dann einfach Schritt für Schritt alles rausgelöscht. Komischerweise war der Fehler, daß das CSS für das img UNTER @media stand. wenn ich es darüber kopiert habe, hat's funktioniert... Verstehe ich nicht... aber bin froh das es jetzt klappt... danke für's ausprobieren!
Gruß

 

[Sempervivum]

daß das CSS für das img UNTER @media stand. wenn ich es darüber kopiert habe, hat's funktioniert...

Das ist sehr plausibel, in CSS ist das so fest gelegt, dass das, was später bzw. unterhalb notiert wird, das, was zuvor bzw. oberhalb steht, überschreibt. Ist noch ein wenig komplizierter wegen der Spezifität aber das ist die erste Regel.

 

[Terminator]

Das ist sehr plausibel, in CSS ist das so fest gelegt, dass das, was später bzw. unterhalb notiert wird, das, was zuvor bzw. oberhalb steht, überschreibt. Ist noch ein wenig komplizierter wegen der Spezifität aber das ist die erste Regel.

Hätte man diesen Fehler mit dem Seiteninspektor gefunden?

 

[Sempervivum]

Garantiert, teste es: Das was überschrieben wird, ist durch gestrichen, auf die Weise sieht man sofort, was wirksam ist und was nicht. Zeilennummern stehen dran, so dass Du es leicht in der Datei findest.