Still working on the functionality of my portfolio page and am having an issue with aligning images in my ‘portfolio’ section on my page.
I’m extremely new to flex box and would appreciate some advice. Id like these rough placeholder images to look similar to the example portfolio page on the assignment page.
That is I’d like the h2 portfolio text to be centre top. Currently it butts my top placeholder img over to the right. I’m not sure how to remove from flow (if that’s what I need to do).
Underneath I’d like my placeholders to be evenly spaced in three rows of two. I used the flex wrap and adjusted the img size to get them two on a row however my other experiments of:
Hey. You could try wrapping your placeholders in a div and applying the display flex to that div alone. That way, the title will maintain its display property and the images will wrap on a new line.
Then, if you want to only have two images per row, you can limit the container div’s width. See an example here if you can’t figure it out by yourself.
Also, pay attention to your tags. Your <a> tags aren’t closed but you don’t need them anyway. You could just give the ids to the sections containers.
1st move your title outside the portfolio element.
Use justify-content: space-between and a margin around your ‘placeholders’ and delete both ‘align-content’, they are for vertical alignment in this orientation and it only reads the last one anyway…
Hopefully that gets you closer!
