Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Hi, I am struggling to center the cards on my page. Any help would be appreciated!

https://codepen.io/Shukri-Isse/pen/WbNKZvr

Your code so far

<!-- file: index.html -->


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Welcome to the forum @shukri.isse1234

For the .cards class, try using a smaller minmax value for grid-template-columns.

Happy coding

3

Thank you for the suggestion. I tried changing the minmax number to 200px but it only made the cards narrower and didn’t center them on the page.

4

Try changing the display property to flex.

5

That fixed it!!! Thank you. I didn’t know you could use a combination of flex and grid like this:

.cards {
display: flex;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
place-content: center;
}

Also, is there a best practice to creating cards? I tried to look at W3schools and MDN when I got stuck but they have completed different ways of doing them it seems.

6

I was just messing around with the code.

Best practice is to keep flex and grid separate.
I’d remove the grid-template-columns, place-content, and grid-gap properties and use something more appropriate for flex containers.

Happy coding

7

Got it, thanks! I’ll keep that in mind.