title: @media tag is not working within an HTML class
body: <p>I have created a following CSS class</p>
  
  <pre class="lang-css prettyprint-override"><code>.BlogCard
  {
    float:left;
    width:100%;
    height:550px;
    margin-bottom:20px;
    border: 1px solid blue;
    box-sizing: border-box;
    background: rgb(255, 150, 150);
  }
  </code></pre>
  
  <p>And the below @media tag</p>
  
  <pre class="lang-css prettyprint-override"><code>@media  screen and (max-width: 500px) {
          body {
              background-color: lightgreen;
          }
           .Blogcard
              {
               height:50px;
               background:rgb(255, 250, 250);
              }
      }
  </code></pre>
  
  <p>While background color changes,the Blogcard dimensions remain same.
  Thanks in advance</p>