Flexbox Help on Personal Portfolio

Hi guys

currently making my way through the Portfolio, and I was after some help with some Flex Box. I’m trying to move the titles of each image directly above it, instead of being off to the side of them. Is it something to do with the Box Directions or making the titles individual boxes themselves?

https://codepen.io/DoomDave/pen/poEzELX

1 Like

I think you need to clean up your HTML a little. I would wrap each title/image combo in its own div and then you can style the div to get the layout that you want.

1 Like

Cool looking page so far (never played but always hearing about dnd)

I’m a beginner too so not sure if this is the correct way but I got the title above your photos using the following:

(basically I put the <a links /a> just before the <img links.

  <p><a href="https://codepen.io/DoomDav e/pen/WNxQGpB" target="blank" 
class="project-tile" div id="box-2">D&D Survey Form</a>
<img class="Survery Form img" src="https://i.postimg.cc/0N9ZHFWC/Screenshot-15.png" alt="D&D Survey Form"></p>

I’m not sure about giving the link it’s own ID/Class, keep it in with the image and you’ll be able to move both at the same time. Right now it looks like the image has it’s own box and the name of the image has it’s on box.

hey bb, cheers for the reply. I’ve set each box into its own div, and I can move the titles themselves but I can’t move the images themselves. Any idea? Flexbox always confuses me :sweat_smile:

Are you still using the same codepen link as above? Because if so I’m not seeing where you wrapped a div around each link/image combo.

For using flexbox, this is the gold standard of instructions:

Hey, sorry it didn’t save when I edited it this morning :sweat:

I’ve been using that link for a while, but still just doesn’t click with me for some reason. I’ll keep researching

@Doomdave hey, I learned flexbox with this game. It was magic to me. I recommend you to try it.


Happy coding!
1 Like

Oh sweet, I’ll check it out :grin:

1 Like