Hello guys, I am trying to do the portfolio project from Responsive web design projects. I’ve managed to make it completely okay but the thing is whenever I try to shrink the window size from the bottom, the footer seems to come upward and overlap.
Will be thankful, if anyone can let me know what is wrong with my code.
P.S: Don’t judge my Code Pens please as they are really similar to the generic ones because I am just learning Web design for my future college projects, so I am just trying to learn stuff as much as I can without focusing on the Design and creativity stuff.
The height of the flex box shrink when you drag the bottom up and eventually the size is not enough for the content. So is not that the footer come into the flex items, it is more like the flex items overflow onto the footer. If you delete the height there will be no problem (the flex height will grow to the size of all the items inside) but it will look bad. What about adding some padding top and bottom
padding: 200px 0;
It will make it loook similar to the initial layout. Or you can keep the height property and add
min-height: 430px;
it will prevent the flex box to be too small, so the content will still fit and it will shrink whit the size of the viewport.
