Teacozy Project - Help with lining up flexboxes

This is my first time asking for help so I apologize if I don’t go about this correctly.
Teacozy Project LINK

I can’t get the 5 boxes below the main banner to line up horizontally. After a lot of research I followed another persons code and almost got it but the boxes are still lined up vertically.
I’m doing this project on codepen. The full project and code are HERE.

I would really appreciate any help.

Hey and welcome to the forums!

It looks like your HTML isn’t quite set-up perfectly for flex to work. You have trend-container, and within that you have a single element trend, within which are the headings and images all just stacked. Flex will just naturally do what you’re looking for by default, but the problem is that flex only orders direct children. Therefore when you have flex on trend-container, it’s just arranging trend, but none of the children within trend.

If you change it and put display: flex; on the trend element, you’ll end up with something closer to what you’re looking for but not quite, as the elements will all be in a row, including the headings. The important thing to note is that it is going in the exact order you have the elements in your HTML.

So what’s the solution then? Well, you need to understand the part where flex only orders direct children, so you want to end up in a situation where the direct children are the blocks you want to be ordered. Therefore I would recommend going with a structure like this:

<div class="trend-container">
    <div class="trend">
        <div class="trend-item">
            <img src="" alt="">
            <h3>Item 1</h3>
        </div>
        <div class="trend-item">
            <img src="" alt="">
            <h3>Item 2</h3>
        </div>
        <div class="trend-item">
            <img src="" alt="">
            <h3>Item 3</h3>
        </div>
        <div class="trend-item">
            <img src="" alt="">
            <h3>Item 4</h3>
        </div>
        <div class="trend-item">
            <img src="" alt="">
            <h3>Item 5</h3>
        </div>
    </div>
</div>

And then your CSS would look similar to:

.trend {
  display: flex;
  flex-wrap: wrap;
}

Hopefully that makes some sense!

1 Like

Yes! Thank you. It worked but now I can’t get it to center.

The likely reason is due to the max-width you’ve placed on the trend-container. Just doing something like justify-content: center;on the trend element should work, however, whilst trend-container has a max-width on it it’ll only be able to stretch as far as the 1000px will allow on bigger screens.

Unfortunately that didn’t work.

No problem! Would you be able to update and relink your Codepen so I can have a look and see what the issue might be?

Yes! and thank you Here is the link

Hey this is what I can see on my end.


Apologies as I’m not massively familiar with the project instructions itself, but this looks like it’s centred correctly to me! Is there a different effect you were looking for?

I figured it out! But thank you so much for all the help!

1 Like