Centring the card and feedback

HTML-CSS
1

Is there a way I can center the card horizontally/vertically? I tried to align, and justify. But both methods did not seem to work. If possible can you give me feedback both about the code and the design?
link: https://website-project-1.nanakobi-genfi.repl.co/

2

It kind of depends on what your plan is for the page beyond what you have now, but using grid is an easy way to center content.

body {
    display: grid;
    place-items: center;
    height: 100vh;
}
1 Like
3

Some feedback for the CSS.

  1. I would use .cards as the class name for the card container.

  2. I would change the card ids to classes and name them something else. You are using them for setting colors so something that expresses that would be a good option. I’d also use CSS variables for the colors, especially seeing as you are using the same colors for the button text. Make them reusable color utility classes.

  3. There are always many ways to do a layout but I find it helpful to use the flex container to do as much of the work as possible. The less you have to explicitly position the child elements the better.

Here is a refactored example with some of the things I’m talking about.
https://jsfiddle.net/ohtd0ekv/

1 Like
4

Thank you so much for your feedback, I will make sure to fix them:)

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.