Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

Responsive page using flex-box

Gilcllys de Souza Costa•125
@gilcllys
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I would like tips to improve my code, I'm thinking about changing areas, but I still don't feel safe to apply for a real position. Another point that I don't have a college degree in is chemical engineering, so I learned everything with the help of books and tutorials. I hope the community can help me improve my skills, thanks to everyone who took the time to comment on my solution.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

  • Dev Rathore•2,540
    @GitHub-dev12345
    Posted about 3 years ago

    ❤️👍 My small suggestion : 1.In Card design CSS Code Used this:

    transform : scale(0.8); this property decrease the size of card. 😉

    large size for increase the number of scale & small size for decrease the number of scale

    I hope you find this helpful

    Marked as helpful
  • Dev Rathore•2,540
    @GitHub-dev12345
    Posted about 3 years ago

    Congratulation 🚀😁 complete your challenge. Used this code want your card in center position :

    in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

    in Card Design CSS Code used this property: align-self: center;

    Marked as helpful
  • Travolgi 🍕•31,320
    @denielden
    Posted about 3 years ago

    Hi Gilcllys, I took some time to look at your solution and you did a great job!

    Also I have some tips for improving your code:

    • add main tag and wrap the card for Accessibility
    • add descriptive text in the alt attribute of the image
    • remove all margin from main id because with flex they are superfluous
    • add justify-content: center; flexbox property to the body for center the card vertically. Read here -> best flex guide
    • after, add min-heigth: 100vh to body because Flexbox aligns child items to the size of the parent container

    Overall you did well :)

    Hope this help and happy coding!

    Marked as helpful
  • Naveen Gumaste•10,420
    @NaveenGumaste
    Posted about 3 years ago

    Hello Gilcllys de Souza Costa ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    • You have to use <html lang="en">

    • To center the card vertically

    max-height: 100vh;
    display: flex;
    justify-content: center
    align-item: center;
    

    happy Coding😀

    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel
    Posted about 3 years ago

    Good job gilcllys with this challenge. Keep up the good work.

    Your solution looks great however you can try scaling the card using the css transform property like this transform: scale() property.

    In terms of your accessibility issue simply wrap all your content between <main> tags.

    I hope this helps Cheers, Happy coding 👍

    Marked as helpful

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub