Check out my code snippet:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.row {
width: 100%;
height: 80%;
margin: 0px;
padding: 0px;
}
body {
background: #EFEFEF;
}
.container-fluid {
width: 100%;
height: 80%;
margin: 0;
padding: 0px;
border: 3px solid;
border-color: #848484
}
.navbar-brand {
position: absolute;
margin-top: auto;
margin-left: 20px
}
#post-container {
margin-left: auto;
margin-right: auto;
border: 3px solid;
border-color: #FF0000
}<div class="container-fluid">
<nav class="navbar"> <img class="navbar-brand" src="images/Ventr_Logo.svg" alt="Ventr Logo" width="100"> </nav>
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-2" style="background: #4E4E4E"></div>
<div class="col-lg-4 col-md-6 col-sm-8" id="post-container">
</div>
<div class="col-lg-4 col-md-3 col-sm-2" style="background: #4E4E4E"></div>
</div>The main column with light gray background and red border is the focal point. When viewed on a tablet-sized screen, the layout maintains a 6:3 ratio as desired. Check it out this image.
The issue arises when viewed on a mobile phone: Look at this image. Instead of 3 columns in line with an 8:2 ratio, they break into separate columns.
How can this problem be resolved? Additionally, the column sizes should adjust dynamically based on screen size.