Klasse nicht nach dem Gebrauch in CSS-Medien Bildschirm arbeiten

Question

ich unten Stil in meinem style.css haben:

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

Jetzt habe ich es im Code Medien Bildschirm für reaktionsschnelle, wie unten:

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

es Element Jetzt nicht und in inspizieren alle Code ist nicht verwendbar:

und HTML-Code ist unter:

<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

Versuche Zugabe !important am Ende jeder Art zum Beispiel padding: 5px !important;

Answer 2

, wenn Sie den 'Bildschirm' versuchen zu entfernen oder 'nur' und nur die Medien?

Wenn es funktioniert, sind Sie der Lösung einen Schritt näher. Es hat viele Male für mich funktioniert.

Answer 3

Kontrolle dieses fiddle

es scheint, adaequat zu sein. Überprüfen Sie Ihr CSS, Medienabfragen sollten sich am Ende Ihres CSS befinden.

.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 4

Wie ich fand, haben beide Regeln gemeinsame Eigenschaften. Wenn zwei Regeln genau denselben Selektor haben und beide gemeinsame Eigenschaften haben, dann sind die Werte der zuletzt deklarierten Regeln anwendbar (wenn keine von ihnen wichtig ist). Also ich nehme an, dass Ihre Medienabfrage vor der Regel deklariert ist, die die gleichen Eigenschaften haben.

Lösung:

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

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

ich andere Werte entfernt, da sie nicht innerhalb Medienabfrage geändert.

Eine andere Lösung besteht darin, dass Sie den Medienabfrageabschnitt nach Ihrer Regel deklarieren, die in der Medienabfrage (.adbox) angezeigt wird.