Hey there, this is my third and hopefully final question. I'm having some trouble with my page layout that was supposed to look like this initially:
[navbar]
[1][2][3]
I was aiming to achieve the following effect when resizing the layout:
[navbar]
[2][3]
[1]
(with the first div under the third one)
However, when I apply the class container mt-3 to the main container that holds all three divs, the layout ends up looking like this:
[navbar]
[1][2]
[3]
Adjusting the margin-left of the third div doesn't move it up to the top row, instead, it shifts to the left as if it's in a different row class.
When I use the parent-container container mt-3, the layout appears like this:
[navbar]
[1][2] [3]
But all the divs become really small, and I can't seem to change the width no matter what I try. I even attempted modifying the bootstrap's "container" class using both pixels and percentages.
Using container-fluid helps a bit, as all the divs become larger (occupying 100% of the page width), but ideally, I'd like them to be at around 90% width. However, the [3] div ends up on the right side, quite far from [2]. Upon resizing the window, the [2] div shifts into the white space between [1] and [3], appearing below [3]. So the layout ends up resembling this:
[navbar]
[2] [3]
[1]
Here's the CSS code:
.main{
background-color: red;
box-shadow: 3px 3px 20px #000000;
border-radius: 20px;
}
.left{
background-color: green;
max-width: 200px;
border-radius: 20px;
}
.right{
background-color: blue;
max-width: 200px;
border-radius: 20px;
}
.parent-container {
display: flex;
}
.right-content{
width: 100%;
text-align: center;
float: center;
margin-top: 10px;
}
And here's the HTML code:
<div class="parent-container container mt-3">
<div class="row">
<div class="left col-4 col-lg-3 order-last order-lg-first offset-8 offset-lg-0">
<div class="col-12 text-center" style="margin-bottom: 15px">
<h3>TITLE LEFT</h3>
</div>
</div>
<div class=" col-8 col-lg-6">
<div class="container card">
<div class="card-body">
<div class="row">
<div class="col-12 text-center">
<h2>TITLE CENTER</h2>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<h3>heading 3</h3>
<h6>heading 6</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 mx-auto">
<a href="#" class="article-link">
<h3>Heading 3</h3>
<p>Text</p>
</a>
</div>
</div>
<hr>
</div>
</div>
<div class="right col-4 col-lg-3">
<div class="right-content">
<h2>TITLE RIGHT</h2>
</div>
</div>
</div>