Skip to content
OverviewSolutions
10
Comments
2
Manuel Brás
@ManuelMadeira98

All comments

  • Manuel Brás•110
    @ManuelMadeira98Posted almost 2 years ago

    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
  • Manuel Brás•110
    @ManuelMadeira98Posted almost 2 years ago

    An easy way to center the card would be using grid or flexbox. For example, adding:

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

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

    Happy coding :)

    2