在媒体屏幕CSS中使用后，类无法正常工作

Question

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:

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>

Answer 1

if you try removing the 'screen' or 'only' and using only the media?

If it work, you are an step closer to the solution. It worked for me many times.

Answer 2

check this fiddle

it seems to be working fine. Check your CSS, media queries should be at the bottom of your CSS.

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

@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;
    }

}

Answer 3

As I found both the rules have common properties. So if two rules have exactly the same selector and both have common properties then the values of lastly declared rules will be applicable (if none of them have !important). So I assume that your media query is declared before the rule that have the same properties.

Solution :

@media only screen and (max-width : 992px) {
/* your other rules */

    .adbox {
    margin-left: 231px !important;
    margin-top: -111px !important;
    }
}

I removed other values as they have not changed inside media query.

other solution is that you declare media query section after your rule that appears in media query (.adbox).

Answer 4

尝试在每种样式的末尾添加!important ，例如padding: 5px !important;