Personal Portfolio assistance

Hey guys,

I’d like to know why the image width, breaks my HTML instead of generating a new line

I tried using flex-wrap wrap; but it makes them in a column which what I’m not looking for.


Can you be a little more specific about exactly what problem you are trying to solve?

I’ve been playing with the code since I asked the question, I re edit it now you can take a look.

if I don’t wrap the container as in flex: wrap;, it breaks the html. but If I do It builds a column which I don’t really want.

My question is why doesn’t it make another row line since they are blocks, but instead the html breaks.

English isn’t my native language hope you understood everything.

Your cards are in a flex display so unless you use flex-wrap: wrap then they will not wrap automatically. If you add flex-wrap: wrap then they do create one single column, but if you widen your browser out enough you will see that they eventually create two columns. This is an issue because of all the margin and padding you have on the cards and the section. You need to scale that down a bit.

Thanks for the quick answer.
Unfortunately the margin/padding aren’t causing the issue according to their definition.
Regardless, I removed them to check it is not it.

The Issue as I see it in the image, is there anything I can do to achieve the design I specifically want? In my head I want a row like I have just for the cards to build new rows instead of breaking the HTML.

I think I may not understand what design you want. I assumed you wanted these images to line up in rows, as many images as possible per row based on the amount of horizontal space. I am able to do that by removing all the padding/margin and using flex-wrap as I described above (plus a few other flex options to make it look nicer). But there are definitely other ways to do this (e.g. grid).

If you can explain it better I might be able to give better help. If you can explain better in a different language then I suggest you do so and we can use google translate.

Yeah I can see how lowering margin/padding from #projects fixing it a bit, but it is still not quite my taste.

The reason I added margin/padding is to make the page longer.

basically I want a row of images, once the row is filled, another one is created for example,
Row 1 → 1,2,3
Row 2 → 4,5,6

And I think you’re right and grid box might be the solution here, I also checked how it’s done on the curriculum project for the sake of learning new design ideas.

Maybe there is another solution for making the page longer and then grid box isn’t needed? I would be glad to hear ideas.

OK, I think I understand what you want and it is exactly what I was thinking. Yes, you can definitely do this with grid but I am telling you that you can do it with flex as well and I only had to make a handful of changes to get what you want. I’ve already given you some suggestions above. I’m going to leave it up to you to figure out the rest :slight_smile:

Another hint, don’t use position: relative on the project-tile div.

Good luck.

P.S. Your content should make the page longer. I’m assuming you are planning on at least adding your contact info, right? I’m not sure why you would need to artificially make it longer.

Thanks for the answer, I’ll take a look at my project after my gym session.

The reason why I want to make it longer because it looks nicer, for example my welcome section has an animation and If it ain’t long enough, it doesn’t have this “nice” touch if you know what I mean.

I want people to actually scroll, you have an animation welcoming you, and then scrolling space to the projects themselves, or space for navigation using the navbar.
I Hope you understood me.

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