Technical Documentation Page - Build a Technical Documentation Page

Hi, currently building the documentation page for the challenge - going well I’m just struggling with one thing. If you look at my pen below and scroll to ‘Wraith’, you’ll see an image. I’d like to get this image to sit nicely inline to the unordered list and have img size up/down with the viewport to an upper limit, is this possible ? been trying for a good hour now I could have completed the challenge ages ago but I am trying to make it look nice.

You can put the ul and image inside a flex container. But the image has transparency so you will have to pull/move it up a bit manually to get the vertical alignment right. It might be easier to align-items: center and do a bit of manual work if needed instead of trying to align the elements to the top/start.

Another option might be a grid with extra rows and let the image span more rows than the list (to move it up and the list down, in relation).

You can use a min() with the image.

Hi thanks for your reply, I did try placing both in a flex contianer however this then messed up the placement of the li and label. I’m about to try putting both the img and ul in indiviudal div’s, then those in a parent flex div container and see if this works. Haven’t learned grid yet i think thats one of the lessons in the course after this project.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.