CODEWITHSUNDEEP
csshtmlweb
Jay
Jay

Reputation: 5084

How can I fix HTML elements and force scroll bars when a user zooms in?

The DIV elements of my website overlap each other when I zoom in to the web page. For example: If you zoom in on StackOverflow, the elements stay in-tact and it zooms in to the center/top of the screen.

I've tried these answers, but none of them state the way I can lock the DIV, span, etc elements to their exact position without them overlapping one another when I zoom in.

What change should I make to my css, guys?

Upvotes: 0

Views: 107

Answers (1)

jpschroeder
jpschroeder

Reputation: 6926

There are several ways your DOM could be structured to prevent the overlap, but browsers generally do a good job of keeping things straight if elements are positioned relative or static and aren't ridiculously large. Position absolute is where you really get into overlapping elements.

Example

Dom:

<div class='wrapper'>
  <div class='box box-1'>
  </div>

  <div class="box box-2">
  </div>
</div>

CSS:

.wrapper {
  position: relative;
  width: 100%;
}
.box {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 0;
}
.box-1{
  background-color: red;
  left: 0
}
.box-2{
  right:0;
  background-color: blue;
}

View On CodePen here. In this example there are two boxes positioned on opposite sides of the screen, when space runs out (due to zoom or resize) the boxes overlap. To prevent this, you need to keep the parent element (by which the children are positioned) from collapsing. You can do this with min-width on the parent element.

See the updated code with a min-width on CodePen here and when zooming you'll see scroll bars appear instead.

Upvotes: 1

Related Questions