@correlucas
Posted
👾Hello Aya, Congratulations on completing this challenge!
Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:
1.Your component is okay but it's missing the vertical alignment. The best way to do it is by using flexbox
. The first step is to add min-height: 100vh
to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) aligns the body and then use the flex properties for alignment with display: flex
/ align-items: center;
/ justify-content: center;
. If you're using the attribution you need to add flex-direction: column
to make the attribution stays under the QR Code component. See the code below:
body {
min-height: 100vh;
background-color: hsl(30, 38%, 92%);
color: hsl(228, 12%, 48%);
font-size: 14px;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
}
2.To clean your code and use a shortcut to place the images mobile + desktop
without need of any media query, use the tag <picture>
instead of two <img>
wrapped in a div or using background-image
. Look that for SEO and search engine reasons it isn't a better practice to import this product image with CSS since this will make harder to the image be found. You can manage both images inside the <picture>
tag and use the html to code to set when the images should change setting the device max-width
depending of the device (phone / computer) Here’s a guide about how to use picture
: https://www.w3schools.com/tags/tag_picture.asp
✌️ I hope this helps you and happy coding!
Marked as helpful