Skip to content
Submitted 24 days ago

Responsive page using flexbox

Leonardo Vandes•90
@ChessUP
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Even though it's something so basic, I'm happy to be able to complete it, even though it might not be how a true professional would develop the website, but with few conditions I'm evolving.

What challenges did you encounter, and how did you overcome them?

where it took me the longest to complete was to center the qr-code image with the container, but little by little I racked my brains and looked at my notes until I discovered a method

What specific areas of your project would you like help with?

Just to know if the algorithm is right and where I could improve.

Code

Please log in to post a comment

Log in

Community feedback

  • Mustafa Sen•1,510
    @mustafasen97

    Instead of using too much margin, put elements like images and text in the correct order in a container. When you give this container padding, it will have a more balanced and clean space in the corners.

    You can use it by researching the display flex, gap property to adjust the space between elements. Or it can be margin-top or bottom instead.

    Also, instead of using too many IDs, prefer using classes. In this design, you don’t need to give width to the image. Make it 100% width.

    The image will already appear centered thanks to its padding in the parent container. After all the above adjustments are made, write these for the image background-position: center;

    background-size: cover;

    Marked as helpful
  • Beauyonradee•40
    @Beauyonradee

    clean code and easy to read

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