Design comparison
Solution retrospective
Is using padding for the paragraph element the best way to make it look the way it looks?
Community feedback
- @PhoenixDev22Posted over 2 years ago
Hi EDllT,
Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:
-
You should use
<main>
landmark for the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology. -
In my opinion, the alternate text should indicate where the Qr code navigate the user : like
Qr code to frontend mentor
. -
Page should contain
<h1>
. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>
withsr-only
class hidden visually and present for assistive tech users. And then use<h2>
instead of<p>
CSS:
- In order to center the card on the middle of the page , you can use the flexbox properties and
min-height: 100vh
for the<body>
add a little padding to the body that way it stops the card from hitting the edges of the browser.(no need for absolute positioning).
width: 320px;
an explicit width is not a good way. consider usingmax-width
to the card inrem
instead
- Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
Aside from these , Great job on this one.
Marked as helpful1 -
- @correlucasPosted over 2 years ago
👾Hello EDllT, congratulations for your solution!
In this case the best thing you can do is use a general padding for the whole container, this way you'll have control over all the elements inside (img, h1 and p)
But you can control the paragraph size with max-width or min-width too. See the example below:
p { max-width: 300px; margin: 0 auto; }
Its a paragraph with the maximum of 300px and aligned center.
Hope it helps, happy coding!
0 - @samd1aPosted over 2 years ago
Hi EDllT, congrats on finishing your challenge it looks great!
I would say padding is one of the best way to make the effectively wrap like the design, however a
max-width
or a margin would also work.Keep coding!
0
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