Skip to content
Submitted over 2 years ago

Responsive landing page design, using bootstrap css grid.

Enamuotor Matthew•120
@oviematthew
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

I am still unsure about the best practices to centre a div vertically, but I believe padding came through, this ismy first week learning CSS, and I am buzzed up to design more

Community feedback

  • Fatlind Shehu•2,230
    @fatlindshehuPosted over 2 years ago

    Centering a div/component using flexbox:

    • display: flex to set the div/component as a flex container.
    • align-items: center to center the div/component vertically.
    • Make sure the div/component has a height in order to center it vertically.
    • justify-content: center to center the div/component horizontally.
    • If you’re unfamiliar with flexbox, I would suggest checking THIS

    Keep up the good work

    Marked as helpful
    1
    Enamuotor Matthew•120
    @oviematthewPosted over 2 years ago

    @fatlindshehu I did the aforementioned flexbox centering practices on this project, but the container just did not get centred vertically, hence why I had to use a "padding-top" style. There was probably something I did not consider in the bootstrap grid, but I am working on it. Cheers.

    0
    Fatlind Shehu•2,230
    @fatlindshehuPosted over 2 years ago

    @oviematthew The reason why is not working in your code is because you need to make the body as parent container:

    body{
  display: flex;
  justify-content: center;
 align-items: center;
 height: 100vh;
}
    • I did this from inspect element & it fixed the issue!

    NOTE: If you find my comments as helpful please Mark as helpful, thanks :)

    Marked as helpful
    0
    Enamuotor Matthew•120
    @oviematthewPosted over 2 years ago

    @fatlindshehu I am indeed grateful for this help. Thanks a lot

    0
    Fatlind Shehu•2,230
    @fatlindshehuPosted over 2 years ago

    @oviematthew Thanks, if you're, you can mark my comments as helpful by clicking Mark as helpful :)

    Marked as helpful
    0
  • javascriptooo•310
    @javascriptoooPosted over 2 years ago

    Given the accessibility issues -- you need to include at least the <main> landmark.

    The <main> landmark tag can be inserted around your content inside the <body>. Here is some documentation

    Adding the <main> landmark will remove all 3 accessibility issues! :)

    Hope that helps! Great work!

    Steven

    Marked as helpful
    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