@VCarames
Posted
Hey @Torawijaya, some suggestions to improve you code:
- Your not using the picture and article element correctly.
-
The picture element isnt needed for this challenge; you only have one image.
-
The Article Element should wrap the entire card. the article event is meant for content that is reusable and can stand on its own. The text by itself can't stand on its own, since it needs a QR code to scan.
<body>
<main>
<article></article>
</main>
</body>
-
The QR image isnt decorative, it serves a purpose. So the Alt Tag description for the QR image needs to have a description.** it can't be blank.** Its needs to tell screenreader users what it is and where it will take them to when they scan it.
-
There's a lot of unnecessary CSS code being used, that is just bloating your code. Remove the following:
main {
display: grid;
grid-template-columns: auto;
margin: 2rem;
}
img {
height: auto;
width: 100%;
}
picture {
max-width: 100%;
padding: 1rem 1rem 0 1rem;
}
article {
display: flex;
flex-direction: column;
}
- Change the following:
Old:
main {
margin: 2rem;
}
New:
main {
padding: 1rem;
}
Old:
article {
padding: 2rem 1rem;
}
New:
article {
padding: 0.63rem;
}
Happy Coding!
Marked as helpful
@Mirare23
Posted
@vcarames Hello vcarames, thank a lot for the better solution, i alr remove the unnecessary css that you mention. but i want to ask some question, do we need to put some margin in <main> so it looks clean when the resolution under 320px. Thanks :)
@VCarames
Posted
@Torawijaya
For anything less than 375px, you will need a margin of maybe 10 - 16px...
The lowest resolution that you need (but not required for this challenge) to is 320px. Anything after that your building a whole new site to accommodate smaller devices.
Marked as helpful
@Mirare23
Posted
@vcarames Thanks, it help me a lot.
