Potentially super simple flex-box issue

My page so far

Hi guys, I’m doing a frontend mentor web challenge and I want the ‘Huddle’ logo on top of the main image-card as seen in the pic below.

In the first link you can see the logo at the left side of the main-image, what’s the cleanest way to get it on top?

my current solution I have to use media queries at (min-width: 908px) and (max-width: 1290px)’ in order to shrink the inner-container around the image to wrap the .logo on top.

Also position:relative still means that the logo is leaving it’s ‘container’ to the left.

Cheers


as seen in the pic below

?

Photo has now added.

Any ideas? Friendly bump

It looks like your Huddle logo is always on top of the other stuff, so it doesn’t really need to be in the same flex-container as the images.

But if you want them so share a container, the container will need flex-wrap, and the logo needs to be in a <div>. If you set the width of that div to 100%, it’ll take up the whole row, and the image/text will be wrapped below in the second row.

1 Like

Thank you! I ended up putting them in a the DIV.