Hey, I have completed the Product Landing Challenge and I was trying to make it look better and I keep having this problem with my header image and the title of the page. I want them to be closer together and I have tried everything from Flexbox to properties of css grid (which is what I decided to stick with). I changed almost every property but I cant change the distance of each other and makes my page look awkward. Please Help!! https://codepen.io/baisol/full/zYPLjOE → Full Page View Of my Challenge (here is where that odd spacing is going on))
https://codepen.io/baisol/pen/zYPLjOE -->Here is the editor view
you dont use right values for your header grid rules.
This
grid-template-areas:
"img img title title"
"nav nav nav nav";
Is same as:
grid-template-areas:
"img title"
"nav nav";
Its pointless to split image into two columns and title into two, and nav into 4, when they can all fit in half the columns. This wont affect the total size of the elements.
This values are wrong too:
grid-template-columns: 4;
grid-template-rows: 2;
You dont tell the number of the columns/row, you tell how much each column/row is going to be big, for example:
grid-template-columns: 100px 1fr;
grid-template-rows: 200px auto;
This will result in two columns, one 100px wide and another taking the remaining space. The rows will also be two, one 200px big and the second, just enough to fit its content. You can use justify-content on the grid container, to determine how columns are distributed horizontally.
I advise you check this link for better info
2 Likes
grid are not needed for this .
check my solution for your code, (the explanations are all in the code comments)
also remind to close the <nav> element
1 Like
Thank you so much for taking the time, super helpful! 
Amazing help!! Thank you so much 
1 Like
your welcome, I’ll delete the code…
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.