Help with flexbox column collapsing

Hi guys,

I am currently working on the Colmar Academy project
I need help with stacking images (and their info text) in a column. I have two flex containers next to each other.

This is what I am aiming for

and this is what I currently have ( I have coloured the containers background for own reference)

I think the answer is a simple one but I am few espressos into my morning and I cannot see the answer that is staring me in the face…

Here is my HTML code

<div class="flex-container2">

<div class="flex-child">
  <img src="images/information-main.jpg" width="90%" id="studyingman">
  <h1>It doesn't hurt to keep practicing</h1>
  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor"</p>
  <aside> Emanuel, Sr recruiter at hiring.com </aside>
</div>

<div class="flex-child">
  <img src="images/information-orientation.jpg" width="35%">
  <img src="images/information-campus.jpg" width="35%">
  <img src="images/information-guest-lecture.jpg" width="35%">
</div>

</div>

and here is my CSS

.flex-container2 {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px;
    background-color: lightblue;
  

}

.flex-child:first-child {
    background-color: lightgreen;

}

When I try flex-direction: column on “flex-child” The images still appear in the same format… I think there is something I am missing but would love some guidance please!
Any help would be hugely appreciated!
Many thanks!!!

Hi @tokyolamberth
you just put the images in your second flex-child container. Images are inline-elements. I’d recommend you build the required HTML structure (with the text elements) first. Probably your problems resolve then.

2 Likes

Hello @tokyolamberth,

If you get a chance, try Flexbox Froggy - A game for learning CSS flexbox. I found it helpful for solidifying flexbox concepts.

2 Likes

Hi Jenny,

Thanks for your suggestion - I’ll have a look into Flexbox Froggy!!

I am actually really enjoying flexbox froggy! it is really well made isnt it!? thanks again for the recommendation.

:+1: no problem, it’s great way to learn. Yes, I love it!