CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
mp849
mp849

Reputation: 15

Media Query Struggles

So I'm working on making my site responsive and am having issues past the 1700px breakpoint.

My Problem

Here's my 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>

My CSS for previous breakpoint:

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

My CSS for the breakpoint that's not working:

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

If I try and add a width, let's say 100%, to that or even to .table-col-1 I get this issue.

Please help. Thanks!

Upvotes: 0

Views: 62

Answers (2)

Johannes
Johannes

Reputation: 67738

Add box-sizing: border-box to that rule - this will include the padding in the 100% width which is otherwise added, summing up to 100% PLUS the given padding.

Upvotes: 1

Shruti Agarwal
Shruti Agarwal

Reputation: 897

Assigning width to 100% doesn't seem to work in this case because your code also adds extra padding to the div which is not needed.

So,can you please try changing the style properties of "table-col-1" to padding: 1.5em 0em; and width to 100%. A working example of this is here : https://jsfiddle.net/m70y6jnd/

Do let me know in comments below if this doesn't help you.

Upvotes: 0

Related Questions