CODEWITHSUNDEEP
htmlcss
yukari
yukari

Reputation: 113

Looks fine when it's 100% zoom but when I zoom out everything went out of place

Here is the image of the zooms:

enter image description here

I have no idea what's the problem.

my HTML code is basically like this:

<div class="wrapper">
  <div class="trimester">
    <table>
    </table>
  </div>
  <div class="trimester">
    <table>
    </table>
  </div>
  <div class="trimester">
    <table>
    </table>
  </div>
</div>

then my CSS code:

.wrapper {
  overflow: auto;
}
.trimester {
  width: 33%;
  display: inline-block;
  vertical-align: top;
}
.trimester table {
  font: 12px Open Sans, sans-serif;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
}
.trimester td {
  padding: 2px;
  overflow: hidden;
}

Upvotes: 2

Views: 649

Answers (2)

dippas
dippas

Reputation: 60563

you can use display:table/[-cell] to solve this particularly issue 

*, *:before, *:after {
  box-sizing: border-box;
}
.wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.trimester {
  width: 33%;
  display: table-cell;
  vertical-align: top;
}
.trimester table {
  font: 12px Open Sans, sans-serif;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  /*demo styles*/
  height:500px
}
.trimester td {
  padding: 2px;
}
/*demo styles*/
.trimester:nth-child(odd) {
  background: red
}
.trimester:nth-child(even) {
  background: green
}
<div class="wrapper">
  <div class="trimester">
    <table>
      <tr>
        <td>1st table</td>
      </tr>
    </table>
  </div>
  <div class="trimester">
    <table>
      <tr>
        <td>2nd table</td>
      </tr>
    </table>
  </div>
  <div class="trimester">
    <table>
      <tr>
        <td>3rd table</td>
      </tr>
    </table>
  </div>
</div>

Upvotes: 1

CreMedian
CreMedian

Reputation: 803

When looking around other posts on Stack Overflow, the general consensus is to use floats and percentage widths to construct your layout in order to mitigate browser zoom issues (See this post).

Think about your use-case too. Zooming-in is far more likely, since it helps to read text if you have visual impairments. (UX discussion). Therefore, unless your use-case explicitly requires zoom-out to be supported, it may not be worth debugging.

Upvotes: 0

Related Questions