I have successfully developed a unique landing page layout consisting of 14 distinct groups.
Within the third group of this layout, there are three columns labeled as divs. Each column contains an image, heading (h3), and accompanying text. The display of these columns is adjusted based on the screen size - for screens wider than 768px, the columns are arranged horizontally, while for smaller screens they are displayed vertically in descending order.
Currently, everything functions correctly with regard to the columns, especially after some JavaScript modifications. The background color of the third group is set to pink, covering the entire area where the columns are positioned, whether vertically or horizontally. However, an issue arises when the screen width exceeds 768px, causing the bottom part of the necessary div within the pink background not to be filled. Strangely, this problem does not occur on phone devices where the content displays properly.
let width = screen.width;
var x = document.getElementsByClassName("column-G3");
var y = document.getElementsByClassName("column-G3-outside");
if(width<768)
{
for(var i = 0; i < x.length; i++)
{
y[i].style.width = "100%";
x[i].style.width = "100%";
}
}
else if(width>=768)
{
width*=0.85;
width_block = Math.floor(width*0.3);
margin_block = (width - width_block*3);
for(var i = 0; i < x.length; i++)
{
x[i].style.width = width_block + 'px';
x[i].style.display = "block";
x[i].style.marginLeft = "auto";
x[i].style.marginRight = "auto";
y[i].style.float = "left";
y[i].style.width = "33%";
}
}.G3
{
background: #a914b5;
background-size: cover;
font-size: 2vh;
padding-bottom: 5vw;
padding-top: 5vw;
}
.G3 p
{
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
.center-in-G3
{
width: 100%;
}
.center-in-G3 img
{
display: block;
margin-left: auto;
margin-right: auto;
}
.center-in-G3 h3
{
text-align: center;
}
.column-G3
{
width: 100%;
}<div class="G3">
<div class="align-center">
<div class="column-G3-outside">
<div class="column-G3">
<div class="center-in-G3">
<img src="./images/3/Icon.png">
<h3>New Music</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p>
</div>
</div>
<div class="column-G3-outside">
<div class="column-G3">
<div class="center-in-G3">
<img src="./images/3/Icon.png">
<h3>New Group</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p>
</div>
</div>
<div class="column-G3-outside">
<div class="column-G3">
<div class="center-in-G3">
<img src="./images/3/Icon.png">
<h3>New Themes</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p>
</div>
</div>
</div>
</div>