QR code component with HTML and CSS

Hi, great job on the QR code. To answer your question, I think your css is pretty concise, excellent work. I’m not sure that you can shorten it very much and still get the same outcome. One thing you could try is to put the text-align: center on your container __card__body and remove it from the h1 and p. I hope that helps. Congrats on your solution.

Well done on completing the challenge! I agree with @gfunk77, your CSS is pretty good!

The only way I would shorten the CSS (if it were my code) is to remove the triplicate border-radius definitions. I only use the standard border-radius: 0.75rem; without the webkit versions and it works fine.

Also, I would move the width element to the container level rather than duplicating it for both the h1 and the p text. In other words, remove it from the h1 and p sections and handle the width for the parent container :

.container__card__body h1 {
    font-weight: 700;
    ***width: 265px;***
    font-size: 22px;
    color: var(--darkblue);
    margin: 2rem 0 1rem;
    text-align: center;
}

Another thing that I find useful is to define the h1, p, etc. as standalone and not as children of the container. This will not shorten your code for this challenge, but it would potentially shorten it if you had other containers re-using the same definitions. For example:

.container__card__body h1 {
}

becomes

h1 {
}

If you keep it the way you defined it as children of the container, you will have to redefine the h1 and p elements each time you use it on another container, which might get confusing.

Hope that helps! Enjoy your next challenge! Kate