Design comparison
Solution retrospective
When I padded the QR image and started to adjust the border-radius, it was a bit wonky because the image isn't lined up with the border. I'd like to use the same border-radius for both the container and the image itself unless this is just something that I'd have to adjust all the time. Is there a different/more efficient way of doing the above adjustment?
Thanks for the help!
Community feedback
- @araujoerickPosted 10 months ago
Hello! To keep the edges aligned I generally combine the padding, border-radius values of the inner element and the outer element. In your case I would do it like this:
.container { background-color: var(--white); border-radius: 30px; padding: 15px; width: 300px; } .qr-img { border-radius: 15px; }
Then just adjust the padding of the texts... Happy studying!
Marked as helpful0 - @danielmrz-devPosted 10 months ago
Hello again, Rafael!
Your solution looks great!
I have a suggestion for improvement:
- In order to make your HTML code more semantic, and since that is the main title of the screen, replace the
<p>
with<h1>
. Thep
is recommended for paragraphs. For titles, we have the HTML headings. Here's a quick guide on how to use them:
The
<h1>
to<h6>
tags are used to define HTML headings.<h1>
defines the most important heading.<h6>
defines the least important heading. Only use one<h1>
per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with<h1>
, then use<h2>
, and so on.I hope it helps!
Other than that, great job!
Marked as helpful0 - In order to make your HTML code more semantic, and since that is the main title of the screen, replace the
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