Skip to content
Submitted over 1 year ago

i used HTML,CSS

accessibility, styled-components, lighthouse
AdamsRuth1•20
@AdamsRuth1
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'm not so sure of my code responsiveness and i am really finding it difficult setting my code to adjust to various screen sizes

Code

Please log in to post a comment

Log in

Community feedback

  • Zainab•180
    @ZainabProgrammer

    To make the div centred both horizontally and vertically you should try:

    .main-div{
width:100%;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}

    Hope it helps you...

    Marked as helpful
  • Durga Jaiswal•230
    @Durga-Jaiswal

    Great. You have to make body tag viewport height 100vh.

    body {
max-height: 100vh;
}

    To avoid scrolling, there should be max-height not min-height. This will make sure that no - scroll bar appear in the main page.

  • Ola•520
    @Great-kiola

    Hello, you might need to import the font for the project as this would make the project more consistent and beautiful

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