Media Query lässt mich die Div-Breite nicht ändern, aber ich kann alles andere ändern

Question

Ich versuche eine reaktionsschnelle Website mit Medienabfragen zu erstellen, bin aber kürzlich auf einen Fehler gestoßen, den ich nicht beheben kann. Die Medienabfrage ändert alles außer der Breite. Hier ist mein Code, jede Hilfe wäre willkommen.

<style> 
 
    @media (max-width:950px){ 
 
     .value { 
 
      width: 100%; 
 
      float:none; 
 
      background-color: black; 
 
     } 
 
    } 
 
</style> 
 
<div style="padding: 0px 5% 100px 5%; overflow:auto;"> 
 
    <div style="height: 400px;padding-top: 70px"> 
 
     <div class="value" style="width: 50%; float: left;text-align: center;padding: 0px 5% 0px 5%;"> 
 
      <img alt="Custom printed t-shirts at a low price." src="images/priceicon.jpg"> 
 
      <h3 style="font-size:24px;"><span>Additional Units Lower Your Price</span></h3> 
 
      <p>Use our simple, all-inclusive pricing system that gives instant access to printed t-shirts with screen-printing or embroidery. No hidden fees! Calculate prices <a title="Products" style="" href="https://www.coastalreign.com/products/">now</a>!</p> 
 
     </div> 
 

 
     <div class="value" style="width: 50%; float: left;text-align: center;padding: 0px 5% 0px 5%;"> 
 
      <img alt="We design you custom printed tshirts free of charge." src="images/designicon.jpg"> 
 
      <h3 style="font-size:24px;"><span>Expert Design Review</span></h3> 
 
      <p>Every order is reviewed by a designer after it is placed. After we convert images to print ready graphics, we will have a high quality mockup sent over for approval before we begin printing.</p> 
 
     </div> 
 
    </div> 
 

 
<div style="height: 400px;padding-top: 70px"> 
 
     <div class="value" style="width: 50%; float: left;text-align: center;padding: 0px 5% 0px 5%;"> 
 
       <img alt="Industry leading turnaround time for custom printed tshirts." src="images/timelyefficient.jpg"> 
 
       <h3 style="font-size:24px;"><span>Quick Processing and Free Shipping!</span></h3> 
 
       <p>All orders are completed in 7 business days guaranteed. We will ship your order of printed clothing free to anywhere in Canada.</p> 
 
     </div> 
 

 
     <div class="value" style="width: 50%; float: left;text-align: center;padding: 0px 5% 0px 5%;"> 
 
       <img alt="Quality custom printed t-shirts, on time and on budget." src="images/qualityicon.jpg"> 
 
       <h3 style="font-size:24px;"><span>We Invest In You.</span></h3> 
 
       <p>Need help before placing your order? Not an issue, our artists are able to provide design assistance before payments are been made. This allows you to see how your ideas look on a t-shirt, hoodie, sweatpants, before any commitments.</p> 
 
     </div> 
 
    </div> 
 
</div>

ich auf eine ähnliche Frage haben gesucht: Media query div not changing width but everything else works und ihren Vorschlag beschäftigt, aber es funktioniert immer noch nicht.

Jede Hilfe wäre willkommen!

Danke !!!!

Answer 1

Sie stoßen auf ein specificity Problem. Inline-Styling wird als spezifischer als CSS-Selektoren betrachtet und ist oft eine schlechte Übung. Wichtig kann alles übersteuern, aber es ist fast immer eine schlechte Übung.

Sie sollten Ihren Code umgestalten und Ihren Stil in eine eigene Datei oder zumindest in Ihr Stiltag am Anfang der Datei verschieben, wenn keine separaten Dateien möglich sind. Auf diese Weise wird alles so funktionieren, wie es sollte.

Answer 2

Der Grund, dass Sie die width nicht ändern können, ist, dass width als ein Inline-Stil in Ihrem HTML definiert ist. Um es zu überschreiben, müssten Sie width: 100% !important; verwenden. Die anderen Stile in Ihrer Medienabfrage funktionieren, weil sie nicht mit passenden Inline-Stilen konkurrieren.