Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Gastonfauret

Posted

Hi! Manuel. Thanks to take your time for watch my code and Always are weel received the suggestions. I follow your suggestuin to use the properties display: grid, height: 100%, place-items: center (in fact I did't know this one) and could see any changes, I have to keep the margin-top to the main to center vertically the div. For sure, There's something I am not doing it properly. The max-width and max-height property behave like in media queries property, right? I gonna to implements in the next challenges. Finally, The fact I use h1, h2, etc, Its because I'm a begginer in Programming so I try to avoid too many divs and start to use semantics tags on HTML, but I read that div are more common to use that semantics tags, Is That Right?

Thanks Again to take a few minutes to watch my code. I really appreciate the suggestions.

A big Hug.

0

@ManuelMadeira98

Posted

Hey!

I had a quick glance at your solution and I have a couple suggestions:

  • Instead of adding a margin top your main element, an easier and cleaner way to center the content would be using grid or flexbox. For example, adding:
// Allow percentage-based heights in the application. Always use this reset.
html,
body {
    height: 100%;
}

body {
    display: grid;
    place-items: center;
}

centers your content vertically and horizontally on the page. The place-items property works as a shorthand for align-items and justify-content.

  • I noticed you are explicitly setting the size for each card, I think a better approach would be to wrap the cards with a container (don't do it with main element) and a max-width. This way, this container would evenly control how much the cards could stretch horizontally. Generally speaking, use max-width and max-height on your elements — as opposed to width and height — as they are more appropriate properties when dealing with responsive layouts.

  • There's no need to use h2 with br elements for the content of the card. Instead, prefer a paragraph element. It is a block level element by default and it will naturally horizontally fill your card. Generally speaking, always try to avoid using br elements on your layouts.

Otherwise it's looking good!

Happy coding! :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord