html – Text overflows into other div when window is resized


I have multiple divs that are stacked in a vertical fashion but when I resize the window the text from one div overflows into other divs and all text on the page becomes unreadable because they are all overlaying eachother. Is it possible to make it so that when the window is resized instead of divs overflowing into eachother they instead expand their height so they are stacked on top of eachother?

Here’s my CSS

.middle {
  height: 100%;
  width: 65%;
  position: relative;
  top: 74px;
  margin: auto;
}

.middle .portSection {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 450px;
}

.middle .portSection .left {
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0px;
}

.middle .portSection .right {
  position: absolute;
  height: 100%;
  width: 50%;
  right: 0px;
}

.middle .portSection .left .description {
  position: relative;

  height: auto;
  width: 100%;
  font-size: 30px;
}

“.middle” is what holds all of the divs, “.middle .portSection .left .description” is the p element that is overflowing



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here