Skip to content
Submitted almost 3 years ago

The Solution to

Valentine Daniel•180
@valcruxx
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

How do i make the entire main div show on a device with a smaller display height

Community feedback

  • darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi Valentine,

    Really good solution, pretty much nailed it.

    I think you're looking for min-height: 100vh;

    I'd recommend tweaking your styles on your <body>:

        background-size: 100% auto;
    background-color: hsl(225, 100%, 94%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    0
    Valentine Daniel•180
    @valcruxxPosted almost 3 years ago

    @darryncodes .... Oh thank you, please I've been having accessibility issues send html issues on my solution report and i don't know how to go about it

    Could you please help me out?

    0
    darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi Valentine, hope you're well!

    Have you viewed the report and checked out the 'Learn more' links?

    They do a really good job explaining the problem and if you find the solution yourself you're more likely to remember and not get stuck again.

    However:

    • change <div id="main"> to <main id="main">. it's good practice to use the most descriptive html mark up as possible. Here is some information on semantics
    • you should always have one <h1> in your design, change this <h2>Order Summary</h2> to a <h1>. Here is some info on heading hierarchy
    • you could remove the <article> tags to clear up your html report, or add a heading. A <h2> would be appropriate as you're not meant to skip heading levels

    One more pointer, you shouldn't be styling with id's. You could get in to all sorts of specificity wars. Id's should be unique where as classes can be used in several places. This means you can reuse styles and write less code with classes.

    I hope that all helps. Happy 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