@correlucas
Posted
👾Hello again gmqrk247, Congratulations on completing this challenge!
Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:
Your component is perfect, but is not responsive yet, this is due the fixed width
you've applied to the container.
Look both width
and max-width
the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible
, for example, a component with width: 320px
will not grow or shrink because the size will be ever the same, but a container with max-width: 320px
or min-width: 320px
can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width
choose or min-width
or max-width
.
Your html code is not optimized yet, since its too long and have some unnecessary elements. To make it clean you start by removing some unnecessary <div>
. For this solution you wrap everything inside a single block of content using <div>
or <main>
(better option for accessibility) and put inside the whole content <img>
/ <h1>
and <p>
.
<body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>
✌️ I hope this helps you and happy coding!
Marked as helpful