I am seeking guidance on how to ensure that the text boxes (div) on my page adjust themselves properly when the size of the page is shrunk. Currently, the text boxes tend to overlap when the screen size is smaller, which is not desirable. I need the boxes to be relative to the page and adapt to the page size accordingly. There is a drag-and-drop functionality for the text within these boxes, and I want to avoid overlap issues when the screen is smaller.
Here is a snippet of my CSS code:
#textBox1 {
width: 22.5%;
height: 70px;
border: 1px solid #535353;
}
#textBox2{
float: right;
width: 22.5%;
height: 70px;
margin-left: 300px;
margin-inline: 745px;
margin-top: -70px;
border: 1px solid #535353;
}
#textBox3{
float: right;
width: 22.5%;
height: 70px;
margin-left: 200px;
margin-inline: 405px;
margin-top: -70px;
border: 1px solid #535353;
}
#textBox4{
float: right;
width: 22.5%;
height: 70px;
margin-left: 200px;
margin-inline: 75px;
margin-top: -70px;
border: 1px solid #535353;
}
////////////////////////
//Bottom line
#textBox5{
width: 22.5%;
height: 70px;
border: 1px solid #535353;
}
#textBox6{
float: right;
width: 22.5%;
height: 70px;
margin-left: 300px;
margin-inline: 745px;
margin-top: -70px;
border: 1px solid #535353;
}
#textBox7{
float: right;
width: 22.5%;
height: 70px;
margin-left: 200px;
margin-inline: 405px;
margin-top: -70px;
border: 1px solid #535353;
}
#textBox8{
float: right;
width: 22.5%;
height: 70px;
margin-left: 200px;
margin-inline: 75px;
margin-top: -70px;
border: 1px solid #535353;
}
Here is a snippet of my HTML code:
<div id="technology-box">
<div id="textBox1" class="react-to-dark" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="autprumysl"></div>
<div id="textBox2" class="react-to-dark" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="zdravotnictvi"></div>
<div id="textBox3" class="react-to-dark" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="doprava"></div>
<div id="textBox4" class="react-to-dark" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="finance"></div>
<br>
<div id="textBox5" class="react-to-dark" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="autprumysl_text"></div>
<div id="textBox6" class="react-to-dark" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="zdravotnictvi_text"></div>
<div id="textBox7" class="react-to-dark" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="doprava_text"></div>
<div id="textBox8" class="react-to-dark" ondrop="drop(event)" ondragover="allowDrop(event)" data-id="finance_text"></div>
</div>
An issue arises as shown in this example: