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 <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!
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.