I'm currently facing an issue with creating a responsive webpage layout. My goal is to have a fixed left column that consists of an image taking up 66% of the page, with the remaining 33% dedicated to scrollable content on the right side. To achieve this, I've decided to use col-sm-8 and col-sm-4 classes.
I've experimented with various approaches to make it work, but the closest I've come is encountering a scenario where the content on the right overflows and creates blank space below the image.
Below is my current code snippet:
<div class="container-fluid" style="padding: 0; margin-right: auto; margin-left: 0px;">
<div class="row" style="margin-bottom: 20px; margin-left: 0px; margin-right: auto;">
<div class="col-lg-8">
<div class="img-holder">
<div class="box-wrapper"></div>
</div>
</div>
<div class="col-lg-4">
<h1>Some Content</h1>
</div>
</div>
</div>
CSS:
.img-holder {
padding: 0;
border: none;
border-radius: 0;
width: 100%;
height: 100%;
z-index:-1;
}
.box-wrapper{
background-image: url(~/img/example.jpg);
background-size: cover;
background-position: 47.5% 42.675%;
background-repeat: no-repeat;
padding-bottom: 100%;
}
I'm aiming for a fluid design that allows the content to stack below the photo when viewed on smaller devices like mobile or tablet screens.