Skip to content
Submitted about 2 years ago

HTML & CSS

EDllT•60
@EDLLT
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Is using padding for the paragraph element the best way to make it look the way it looks?

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hi EDllT,

    Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

    1. 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.

    2. In my opinion, the alternate text should indicate where the Qr code navigate the user : like Qr code to frontend mentor.

    3. Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>with sr-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 using max-width to the card in rem 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 helpful
    1
  • Lucas 👾•104,400
    @correlucasPosted about 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
  • Sam•230
    @samd1aPosted about 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 GitHub

Join 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