Title of tribute page next to image

I didn’t get much of a response with my last topic. Thought I should elaborate better. I’m having issue placing the title of my Tribute Page next to the image. Using the flex operators, I couldn’t get that to work. I even tried copy and pasting the title into the img operation. That didn’t work either. Does anyone have any advice for me to take?

You need to make the parent of the elements the flex container. Set display: flex on the #main selector.

1 Like

That worked! Thank you so much!

eh…I have another issue now. Wanting to add bullet list below image and title. Coming out next to title and image, instead. Even tried using the align-text: stretch; That isn’t helping me out any.

Sorry for the late reply.

All the elements share the same flexbox container, so they are (by default) all put in a row.

There are many ways of doing layout with flexbox, in this case the easiest solution might be to just move the list out of the container. You can make containers for different layouts as needed. Remove flex from main and just have it be a normal container with a background color. Now inside main give the image and title a container and set it to flexbox.

I would suggest you review the challenges on flexbox, check the MDN docs and try flexbox froggy. You can also check out some video tutorials on youtube (Academind and The Net Ninja, Flexbox search).

You also have to fix the HTML, as it has errors in it. I’d also suggest using the CSS code box for all the CSS and not have it in the HTML (remember, don’t use the <style> element when using the CSS code box).