Build a Product Landing Page - Trouble centering items

Tell us what’s happening:

I’m having some trouble centering items in the “Learn JavaScript” section. The title won’t vertically center and the button won’t horizontally center.

I don’t think I properly set up the grid. Maybe I used the wrong rules or too many rules. Feedback and suggestions appreciated.

Thanks!

Your code so far

CodePen

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/

I usually use display:flex for vertical centering. It’s just three style properties:

display: flex;
justify-content: center;
align-items: center;

Removing position:absolute from the buttons should work. The text-align: center in the .product div should already center the buttons horizontally.

You don’t need to add grid-template-rows for this grid. By default grids will automatically add rows if necessary, and their heights will adopt to the grid items’ heights.

EDIT. You can also make the grid responsive by replacing the fixed column values with this:

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

It’s a handful, but what it does is that it determines the number of columns based on the grid’s width. Each column will be at least 280px, and will expand if it has enough room. If the grid is wide enough to fit two 280px columns, it will use two columns, and so on.

You’ll have to remove the fixed width in the product div and title for the best effect.

1 Like

You’re amazing! All of that worked. Thank you so much.