Search code examples
htmlcssalignment

Remove scrollbars when screen is small

I have been trying to align the div (table) to centre. I changed the margin and the width and it works fine but when the screen is small, I get the scroll down/right bar as shown below :

enter image description here

How can I change that? I tried putting a max-height and playing with the margins (set to 0) but with no success.

HTML :

<div class="container">
<div class="table">
<h3 class="table-title basic-title">####</h3>
<ul class="table-list">
<li></li>
<li></li>
</ul>
<div class="price"></div>
<a class="buy basic" href="#">MORE</a></div>
</div>

CSS :

.container {
  max-height: 465px;
}

.table {
  position: relative;
    width: 50%;
    max-width: 320px;
    min-width: 270px;
    margin: 30px auto;
  background: #fff;
  text-align: center;
  height: auto;
  margin-bottom: 90px;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}
Solution

  • You can set overflow to hidden.I think this will remove your problem.

    body
    {
    overflow:hidden;
    }

    Note: Try overflow.. i think its because of overflow you have been getting the problem.