Search code examples
htmlcssmedia-queries

class not work after use in media screen CSS

I have below style in my style.css:

.adbox {
    background: #304254;
    padding: 5px;
    border-radius: 4px;
    width: 468px;
    height: 66px;
    position: relative;
    float: left;
    margin-left: 20px;
    margin-top: 60px;
}

Now I used it in media screen code for responsive, like below:

@media only screen and (max-width : 992px) {
    /* -=>Meta */
    .meta {
        margin-bottom: 15px;
    }

    /* -=>Blog Block */
    .blog-block h2 {
        margin: 15px 0 10px 0;
    }
    .blog-block .summary {
        height: auto;
    }

    .adbox {
      background: #304254;
      padding: 5px;
      border-radius: 4px;
      width: 458px;
      height: 66px;
      position: relative;
      float: left;
      margin-left: 231px;
      margin-top: -111px;
    }

}

HTML:

<div class="adbox">
  <a href="google.com">
   <img class="img-responsive tablighatextra" src="0098.in/uyedfuygwecgeifg/wp-content/uploads/2016/11/…; alt="تبلیغات" />
  </a>
</div>

Now it not work and in inspect element all code is not usable:

enter image description here

and HTML code is below:

<div class="adbox"><a href="http://google.com"><img class="img-responsive tablighatextra" src="http://0098.in/uyedfuygwecgeifg/wp-content/uploads/2016/11/814d302fbaf4ba308e6eba7a7e7b6f28.gif" alt="تبلیغات" /></a></div>
Solution

  • Try adding !important at the end of each style for example padding: 5px !important;