Submitted 4 months ago
Qr Code card with fixed values that is centered in desktop and mobile
@franzbackhaus3008
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
- @simgeduruPosted 4 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 - @DarkstarXDDPosted 4 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 thewidth
to 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 - The "improve your..." text is a heading. You can use a
Please log in to post a comment
Log in with GitHubJoin 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