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
Submitted
Qr Code card with fixed values that is centered in desktop and mobile
kleschmabilla• 20
@franzbackhaus3008
Design comparison
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
Darkstar• 1,000
@DarkstarXDD
Posted
- 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-widthproperty 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
heighton the.imagecard(the content will decide the final height of the card) and change thewidthto bemax-width. - Set the image to be
max-width:100%. No need to set a fixed width for the image. Whenmax-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