Skip to content
Submitted 5 months ago

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

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

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

Community feedback

  • simgeduru•50
    @simgeduruPosted 5 months ago

    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

    0
  • Darkstar•1,100
    @DarkstarXDDPosted 5 months ago
    • 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.
    0

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