Reduce image size

Question

I can’t reduce the size of this image via css. Could someone help me?

<!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark" id="mainNav" data-toggle="affix">
    <div class="container">
      <a class=" navbar-brand smooth-scroll" href="index.html">
        <img class="imagem" src="img/logo-s.png" alt="logo">
      </a> 
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
            <span class="navbar-toggler-icon"></span>
      </button> 

/* CSS */ @media(max-width: 480px;){ . navbar . img{image height: 10px; } }

Answer 1

I suggest you use the image class or even assign an id, remembering that if there are images with the same class, they will all change.

 @media(max-width: 480px;){ 
     .imagem{ 
          height: 10px; 
       } 
 }