Media Query Struggles

Question

Also arbeite ich daran, meine Website reaktionsfähig zu machen und habe Probleme nach dem 1700px Breakpoint.

My Problem

Hier ist mein html:

<div class="container-1"> 
<div class="header"> 
    <h2>OneDrive/ODB</h2><br><a class="one" href="#Anchor">Report a SharePoint bug here</a> 
</div> 
<div class="table-col-1"> 
    <div class="border-1"> 
<div class="table-head-1"> 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
    </div> 
<div class="text-container"> 
<p class="table-text">Post and vote on feature suggestions & improvements on UserVoice:</p> 
    <br><a href="#" class="button">ODC/ODB web</a> 
    </div> 
</div> 
</div> 

Meine CSS für vorherigen Haltepunkt:

.table-col-1{ 
padding: 1.5em; 
display: inline-block; 
width: 20%; 
} 

.table-head-1{ 
padding: 1.5em; 
background-color: #515251; 
display: inline-block; 
border-bottom: 2px solid #000000; 
} 

.table-text{ 
font-size: 15px; 
line-height: 18px; 
padding-bottom: 1.5em; 
} 

.text-container{ 
padding-top: 1.5em; 
padding-bottom: 3em; 
} 

.border-1{ 
border: 2px solid #000000; 
} 

Meine CSS für den Haltepunkt, der nicht funktioniert hat:

@media screen and (min-width: 1700px) and (max-width: 4000px){ 
.table-head-1{ 
padding: 1.3em; 
background-color: #515251; 
display: inline-block; 
border-bottom: 2px solid #000000; 
} 
} 

Wenn ich versuche, eine Breite hinzuzufügen, sagen wir 100%, oder sogar .table-col-1, bekomme ich diese issue.

Bitte helfen. Vielen Dank!

Answer 1

Fügen Sie box-sizing: border-box zu dieser Regel hinzu - dies schließt die Polsterung in der 100% -Breite ein, die ansonsten hinzugefügt wird, und summiert sich zu 100% PLUS der gegebenen Polsterung.

Answer 2

Das Zuweisen einer Breite zu 100% scheint in diesem Fall nicht zu funktionieren, da Ihr Code dem div zusätzlich eine zusätzliche Auffüllung hinzufügt, die nicht benötigt wird.

Also, können Sie bitte versuchen, die Stileigenschaften von "table-col-1" zu padding: 1.5em 0em zu ändern; und width to 100%. Ein funktionierendes Beispiel ist hier: https://jsfiddle.net/m70y6jnd/

Lassen Sie mich in Kommentaren unten wissen, wenn das Ihnen nicht hilft.