Project Survey Form - Problem with grid's hight

Project Survey Form - Problem with grid's hight
0

#1

Hello, I’m new in FCC, and I am triyng to make the second project of the Responsive Web Design course. The page is a work in progress, and I’m stuck because I tried to use css grid in the form to make two columns and also I wanted to make the cells have the same behavior as the elemnts in a flexbox with align-items: stretch. However, when I tried usign the align-items property of the grid, my last rows of cells overflowed the (wich rigth now I’m usign as its container). Do you guys know what I messed up? This is the link to de project so you can see the code:


#2

So, I checked out your CSS and debugged it a little using color in a forked pen I made. If you look at it, you’ll see the last row of the grid is hanging off the bottom by the exact amount as the <h1> and <p> tags’ total height.

Looking at your CSS again, I noticed that #survey-form, your grid, has a height of 100%, which tells the browser that it should have a height of 100% of the parent element, aka the <main> element which you gave a height of 80vh. So, each grid element is 20vh high, so the contents of <main> are greater than 80vh. You could use CSS variables and a calc function to account for the height of the margin, padding, and text in the h1 and p tags automatically, and you won’t have this problem anymore.

P.S. I also noticed that you wrote the bottom-left grid item as <div id="item 7">, so I changed it to <div id="item-7"> Watch out for those spaces!


#3

Thanks a lot, I couldn’t figure that out!


#4

No problem. I can’t tell you how many times the coloring trick has saved me from pain when doing layout.