Separating divs with a white line to cater to various mobile display sizes

Question

Separating divs with a white line to cater to various mobile display sizes

I've put together a simplified version where I removed all styling except for the background color and height for easy visibility. Can anyone shed light on why there is a white line appearing between the divs? It seems to be appearing randomly depending on the screen size. This issue is present in both Chrome and Edge, although I have not tested it in other browsers yet. Initially, I suspected it was an problem with Chrome's mobile viewer, but the same issue persists in Edge as well. Does anyone have insight into what might be causing this or how to fix it? Take a look at the code here. By visiting this link, you can switch between mobile views to observe the issue as shown in the image below.

https://i.sstatic.net/HTrur.png

javascript html css reactjs mobile

Answer 1

Answer №1

The reason behind those white lines is the structure of your HTML code. Applying this universal reset might assist in eliminating those white lines.

* { margin: 0; padding: 0; }

Your CSS content could resemble the following:

* {
  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);
}

I trust this information can be beneficial to you in some capacity. :)

Answer 2

The reason behind those white lines is the structure of your HTML code. Applying this universal reset might assist in eliminating those white lines.

* { margin: 0; padding: 0; }

Your CSS content could resemble the following:

* {
  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);
}

I trust this information can be beneficial to you in some capacity. :)

Answer 3

Answer №2

The reason behind this issue remains a mystery to me, but I have discovered a simple workaround. By setting the background color in the parent div and allocating a percentage to each child div as shown below, the problem can be resolved.

.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>

Answer 4

The reason behind this issue remains a mystery to me, but I have discovered a simple workaround. By setting the background color in the parent div and allocating a percentage to each child div as shown below, the problem can be resolved.

.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>

Separating divs with a white line to cater to various mobile display sizes

Answer №1

Answer №2

Similar questions

Having trouble with loading JavaScript during ng build --prod process

Custom Component in React Bootstrap with Overflowing Column

Stay updated with modifications in array beyond react by subscribing

What enables typescript to be eligible for transpiling is its equivalent level of abstraction to javascript?

"Encountering Devextreme Reactive Errors while navigating on the main client

Desynchronization of jQuery

Exploring the depths of nested JSON structures with ReactJS

What causes the checkboxes to shift positions when selected in Safari?

Customize the background color of a Material UI row with varying colors for each cell

The homepage on Delphi is having trouble displaying the menus

Vue.js component unable to validate HTML input patterns

Ensuring Smooth Transfer: Sending Local Storage Data to MVC Controller

Incorporating the Material UI App Bar alongside React Router for an enhanced user

Tips to store Google fonts in the assets directory

What Occurs to Processed Messages in Azure Functions if Result is Not Output?

Tips for transferring express route handling to the subsequent middleware and bypassing the current block of code

Can the value of an object parameter be inserted dynamically?

CSS - Implementing two stylesheets sequentially in an Opencart website

What is the best way to navigate through the underlying MatDialog while the MatSelect is active?

At times, PHP mail usage may result in certain $_POST arrays being unexpectedly empty