Skip to content
OverviewSolutions
5
Comments
4
OliCB
@OliCB

All comments

  • OliCB•70
    @OliCB

    I think you submitted for the wrong challenge, as this is technically supposed to be a QR code component.

  • OliCB•70
    @OliCB

    Good job! Here are a few observations:

    • Remember to delete README-template.md and put your infos in the README.md 😉
    • When your card becomes bigger than the screen, the layout breaks because it has a fixed height of 100vh, so when that happens a bit of the card gets chopped off on the top and on the bottom your background stops before the end of the page. This can be replicated by shrinking the window to a very small size. I admit that kind of an unrealistic edge case because not even the smallest phones would have screens that small, but it's something worth keeping in mind for future layouts. This can be easily fixed by using min-height: 100vh; instead of height: 100vh;. In general, it's recommended to use min-height and max-width, instead of height and width to avoid breaking the reponsiveness of the page.

    That being said I think this solution is pretty good! Hope this is useful!

    Marked as helpful
  • OliCB•70
    @OliCB

    A few observations:

    • Make sure that your code indentation is consistent, this will make your code more readable
    • Avoid using non-existent tags like a1 and a2. In this case, if you need to select a part of a sentence, use <span class="yourClassHere">
    • Your layout breaks on smaller screens and is not responsive. This is because your card has a hardcoded absolute value. This also means that on almost all screens you card is not centered. To center a div, consider giving it a margin: 0 auto;
    • The fonts used do not correspond to the design, which uses the Outfit font.

    Hope this is helpful. Always keep learning and always keep coding!

  • OliCB•70
    @OliCB

    Congrats for your submission! Here are a few observations that I have:

    • The color of your background is a bit off compared to the design. To select the exact color used in the design, you can open the image in Firefox and use its color picker.
    • Similarly use can also use dev tools to measure pixels and get widths/heights/paddings that are closer to the design.
    • You might want to put the attribution text at the bottom of the page. This can be achieved, for example, by wrapping your card div in a container div, centering the div vertically in the container and making the container take the whole space, thus pushing the attribution further down.

    Hope this is useful!