Tell us what’s happening:
I don’t think I properly set up the grid. Maybe I used the wrong rules or too many rules. Feedback and suggestions appreciated.
Your code so far
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:
I usually use
display:flex for vertical centering. It’s just three style properties:
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.
You’re amazing! All of that worked. Thank you so much.