Question 43611 in Html Question posted in
Some basic documentation can be found here.

White line between divs for some different mobile views – Html

I created a minimal reproduceable example where I took out all styling except the background color and a height so it can be easily visible. Can anyone explain why there is a white line between the divs? It seems to be random based on the screen size. This issue is in chrome and Edge. I have not checked other browsers yet. I first thought it was an issue with Chromes mobile viewer but the same problem exists in Edge. Does anyone know what is causing this or how to resolve it? Here is the code. When you go to this link, you can switch between mobile views to see the issue as shown in the image below.

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I never found out why this is happening but the only solution I have found is to simply put the background color in the parent div and add a percentage to each child div like below.

    .main{
  position: relative;
  height: 100px;
  background: rgba(1, 65, 99, 0.99);
}
.main-bottom-div {
  height: 65%;
}
.main-middle-div {
  height: 45%;
}

<div className={"main"}>
  <div className={"main-middle-div"}>
    <div style={{ padding: "0px 20px" }}>test </div>
  </div>
  <div className={"main-bottom-div"}>
    <div>test</div>
  </div>
</div>

  2. 0

    The cause of that white lines is the body of your HTML. Adding this global reset may help you get rid of that white lines.

    * { margin: 0; padding: 0; }

    So the content of your CSS data may look like this.

    * {
  margin: 0;
  padding: 0;
}
.main-bottom-div {
  min-height: 35vh;
  background-color: rgb(1, 65, 99);
}
.main-middle-div {
  height: 10vh;
  background-color: rgb(1, 65, 99);
}

    Hope this could help you in some ways. 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search