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:
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
<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
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!
Thanks a lot, I couldn’t figure that out!
No problem. I can’t tell you how many times the coloring trick has saved me from pain when doing layout.