I aligned my text within div tags. As I decrease the size of the page due to the site being responsive, the div tags also shrink, resulting in excessive white space between words. Is there a solution to address this issue? view image here
Another concern involves four black div tags similar to those shown in the image. I aim to make them smaller (sized like the red ones). While setting width and height works on PC browsers, it leads to margins that cause display issues on mobile devices as the page doesn't fit their screens. If the dimensions are not set to 100%, shrinking the page causes text to extend beyond the div borders. Any assistance with this would be appreciated. view image here
The following code pertains to the four div tags.
.first-1{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
display: inline-flex;
}
.second-2{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
display: inline-flex;
}
}
#first-e{
border: solid black;
border-radius: 10px;
width: 40%;
height:40%;
font-size: 18px;
padding: 0px 10px 40px 10px;
margin: 50px 0px 0px 10px;
text-align: justify;
align-content: center;
}
#second-e{
border: solid black;
border-radius: 10px;
width: 40%;
height:40%;
font-size: 18px;
padding: 0px 10px 40px 10px;
margin: 50px 0px 0px 10px;
text-align: justify;
}
#third-e{
border: solid black;
border-radius: 10px;
width: 40%;
height:40%;
font-size: 18px;
padding: 0px 10px 40px 10px;
margin: 50px 0px 0px 10px;
text-align: justify;
}
#fourth-e{
border: solid black;
border-radius: 10px;
width: 40%;
height:40%;
font-size: 18px;
padding: 0px 10px 40px 10px;
margin: 50px 0px 0px 10px;
text-align: justify;
}