Potentially super simple flex-box issue

HTML-CSS
#1

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

active-states
active-states1440×800 67.6 KB

mobile-design
mobile-design750×1600 80.5 KB

#2

as seen in the pic below

?

#3

Photo has now added.

#4

Any ideas? Friendly bump

#5

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
#6

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