https://i.sstatic.net/3RYY6.png
I'm facing a challenge in designing a website with a unique layout that has left me puzzled.
I've created a codepen example to showcase what I'm trying to achieve. Specifically, I need to implement a Hero Banner on top of a standard 1200px container. The layout requires a 400px wide container on the left side that aligns parallel to another 400px container below it. The red container should line up with the purple container below, while the right side needs to extend to the end.
The difficulty lies in making this design responsive. Despite trying various flex options, I have yet to find a solution.
Is there a way to accomplish this using only CSS and HTML without relying on JavaScript?
You can view my code pen here: https://codepen.io/hundredbillion/pen/jOPRdgr
Here is my code snippet:
<div class="text-image-banner">
<div class="text-flex">
<div class="text-content">
<h5>This needs to be 400px wide and the right and left edges must match the right and left edges of the orange bar below for all screen widths</h5>
</div>
</div>
<div class="img-flex">
<div class="img">
<p>This needs to stretch all the way to the right, but the left edge of the red bar must match the left edge of the purple bar for all screen widths. An image will go here</p>
</div>
</div>
</div>
<div class="container">
<p class="center">this is a 1200px container</p>
<div class="flex">
<p class="four">text container</p>
<p class="eight">img container</p>
</div>
</div>
And here is my CSS code:
.text-image-banner {
display: flex;
margin-left:auto;
margin-right:auto;
}
.text-flex {
background: blue;
display:flex;
justify-content:flex-end;
flex: 1;
}
.text-content{
background: yellow;
display:flex;
width:400px;
}
.img-flex{
background: red;
flex-basis: 1030px;
}
/*---- this is a plain vanilla hero banner ----*/
.container{
max-width:1200px;
margin-left:auto;
margin-right:auto;
background:pink;
}
.four{
background:orange;
text-align:center;
width:400px;
height:200px;
}
.eight{
background:purple;
text-align:center;
color:white;
width:800px;
}
.flex{
display:flex;
}
.center{
text-align:center;
}