Skip to content
OverviewSolutions
2
Comments
1
Gazdik Tamas
@tamasgazdik

All comments

  • Gazdik Tamas•40
    @tamasgazdikPosted over 1 year ago

    Good job on completing the challenge! A couple of tips that could be beneficial in the long run:

    index.html

    • use main element instead of <div class="main">. main has actual semantic meaning and therefore better in terms of accessibility. div doesn't have any semantic meaning whatsoever
    • since the content within the <h3> is the only title, you can instead include it in <h1> and then style it as you'd like it to appear

    style.css

    • at body selector adding min-height: 100dvh; is generally a good idea, since for mobile devices it takes into account different controls, that might pop in during scrolling (you know, that button triplet - background apps, exit to start screen of mobile, go back, or the address bar at the top)
    • middle part can be positioned centrally by setting display: flex; and justify-content: center; on the body, then margin: auto; on the .main
    • position: relative; is unnecessary for the img, as you don't specify either top, bottom, left, or right
    • padding: 1px 20px; - 1px is basically invisible, that can be removed. If you want to do padding only on left and right side, you can instead do: padding-inline: 20px; (for setting top and bottom padding you can do padding-block: 20px;)
    • also the style-guide.md specified the paragraph font-size to be 15px. Since by default most browsers use 16px, setting font-size: 0.9375rem; on p should do the trick.

    Once again, great work, good luck going forward! :)

    Marked as helpful
    0