Struggling with my portfolio website, I encountered a challenge. I attempted to place two divs side by side, each containing text and an image. While the initial setup was simple, trying to make it responsive using flexbox has proven to be quite frustrating.
Here is the desired layout achieved using flexbox in plain HTML and CSS.
The current code being used (without flexbox implementation due to difficulty grasping it) is as follows:
#best_cases {
height : 800px;
}
#first_case {
width : 650px;
height : 577px;
float : left;
margin : 95px 0 0 211px;
border-radius : 5px 5px 0px 5px;
background : #1f2930;
}
/* Additional CSS properties omitted for brevity */ <div id="best_cases">
<div id="first_case">
<h2>T3Qvi3w</h2>
<p>Shop voor het kopen van <br />
smartphone accessoires.</p>
<img src="img/TeQview_small.png" alt="" width="580" height="auto" />
</div>
<div id="second_case">
<h2>Studieplaen</h2>
<p>De nieuwste manier om <br />
te plannen.</p>
<img src="img/Studieplanner_small.png" alt="" width="580" height="380px" />
</div>
</a>
</div>Your assistance in resolving this issue would be greatly appreciated. Thank you!