Personal Portfolio Project Works Flex Issue

Hi All,
I am working on FCC Challenge
Build Personal Portfolio

I am getting the different projects all in same row, I wanted it to arranged as per the screen width being responsive.
I have used flex-direction : column for arranging divs within it vertically centered.
then within the detail class have used flex with flex-direction:row and flex-wrap:wrap , justify-content:space-around . This part is not working as aspected.

My work : https://codepen.io/devendra-singh/pen/mzpQZJ

Hi,

I think that your problem is just because your title in the project section is been affected by display: flex property. Try to wrap only your projects cards with a container that has a flexbox behavior.

I removed the title div and run it in full screen , even then its same

To fix that you could add a media query for larger screens and block your project cards width to 33,333% with the max-width property.

I noticed that your project section height is not considering all your cards height. I added height: auto in your #project selector, and it worked fine. :+1:

1 Like

Thanks it worked !

I didn’t use media query though but used flex: 0 1 29%; in project-tile class
also added the height:auto though made min-height:90vh for the #project as I want the section cover the more of the view area.

My final work : https://codepen.io/devendra-singh/pen/mzpQZJ

1 Like