Design comparison
Solution retrospective
i like the spacing in my component. But would like to make shorter css code.
What challenges did you encounter, and how did you overcome them?No challanges at this porject, pretty straigh forward,
What specific areas of your project would you like help with?None
Community feedback
- @gfunk77Posted about 1 year ago
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.Marked as helpful1 - @funficientPosted about 1 year ago
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
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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