Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

centring div's

BrovoJD 190

@Jaheim-Douglas

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This challenge was easier than I expected it to be, but it's good to refresh on using flexbox, inline-block and centring divs.

Community feedback

P

@JIH7

Posted

The link to the Github repo doesn't appear to work so I can't see your code, but if you're trying to center the "container" div on the screen, you'll want the body to have a height equal to the screen height. HTML elements will automatically grow wide enough to fill the available space, but will only grow as tall as they have to to fit all of the content inside. Setting the body tag to the height of the viewport helps with this.

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

A vh is equal to 1/100 of the screen height and a vw is 1/100 of the screen width. You don't want to overuse these units as it can cause problems, but putting them on the body is generally fine.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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