Skip to content
Submitted about 1 year ago

Qr Code card with fixed values that is centered in desktop and mobile

kleschmabilla•20
@franzbackhaus3008
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?

I am quite happy with the solution even though it is not quite perfect

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

I was first struggling with the html structure of the div elements, but after some consideration i think i got it down.

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

I dont know if my font implementation is correct, and if there are ways to improve my html structure

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • simgeduru•50
    @simgeduru

    I have heard that it is not correct to give a width height value in imgs, and doing so leads to distortions in responsive designs. that's my only advice

  • P
    Darkstar•1,440
    @DarkstarXDD
    • The "improve your..." text is a heading. You can use a <h1>. Always try to use the appropriate elements.
    • Don’t use fixed widths and heights on the container. They remove the containers ability to dynamically resize.
    • Instead let the content inside the container decide the size of the container.
    • But specify a max-width property so the container won’t get too large on really big screens or if you simply want to control the final size of the container.
    • So in this case you can remove the height on the .imagecard (the content will decide the final height of the card) and change the width to be max-width.
    • Set the image to be max-width:100%. No need to set a fixed width for the image. When max-width: 100% is set it will be limited to the maximum width allowed by the parent element.
    • You also need to have a <main> element in your webpage. It’s a landmark element.

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