Skip to content
Submitted over 2 years ago

Responsive page using flex-box

Gilcllys de Souza Costa•125
@gilcllys
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 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.

Community feedback

  • Dev Rathore•2,600
    @GitHub-dev12345Posted over 2 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
    1
    Gilcllys de Souza Costa•125
    @gilcllysPosted over 2 years ago

    @GitHub-dev12345 Thank you very much, my friend !

    0
  • Dev Rathore•2,600
    @GitHub-dev12345Posted over 2 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
    1
    Gilcllys de Souza Costa•125
    @gilcllysPosted over 2 years ago

    @GitHub-dev12345 Thank you very much, my friend ! all tip was great to me

    0
  • Travolgi 🍕•31,400
    @denieldenPosted over 2 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
    1
    Gilcllys de Souza Costa•125
    @gilcllysPosted over 2 years ago

    @denielden Thank you very much, my friend ! all tip was amazing

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 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
    1
    Gilcllys de Souza Costa•125
    @gilcllysPosted over 2 years ago

    @Crazimonk Thank you very much, my friend ! I'll use it

    1
  • Shashree Samuel•9,260
    @shashreesamuelPosted over 2 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
    1
    Gilcllys de Souza Costa•125
    @gilcllysPosted over 2 years ago

    @TheCoderGuru Thank you very much, my friend ! all tip was great to me

    1

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