如何更改图像的宽度和高度？

Question

So I'm trying to change the width and height of my circles that have images inside them, to make it responsive. On the query for responsiveness I did this:

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

  #Equipe .equipe img{
   width: 50px;
   height: 50px;
  }
  ...

.Equipe{
  margin: 0;
  padding: 1px;
  background-color: #ffffff;
  width: 100%;
  height: 100vh;
  overflow-y:hidden;
}

.equipe{
  width: 20%;
  float: left;
  margin: 10px;
  padding: 15px;
  color: #676767;
  border-radius: 15px;
}

.equipe img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 80px 20px 30px 0;
  border: 5px solid #46664d;
}
...

The reason why i'm writing #Equipe .equipe img is because equipe it's inside the div Equipe.

<div id="nossa-equipe">
      <div class="Equipe">
          <h8>Equipe</h8>
          <div class="equipe">
            <img src="./img/rodrigo.jpeg">
            <h7>Rodrigo Ferreira/Developer
            </h7>
          </div>
...

But the width and height of my circles aren't changing. Help?

Answer 1

You have to insert the media query after the regular styles in your CSS stylesheet. If you have them in the order you posted them in your question, the "regular" styles will overwrite the mobile styles (since they follow after the mobile styles and are valid for all sizes). Just turn the order around...

Answer 2

In the HTML code posted by you, I see that <div class="Equipe"> => Equipe is a class, not an ID. So it should be referenced with a . in CSS. Selector #Equipe .equipe img{ in the media query should be .Equipe .equipe img{ .