Design comparison
SolutionDesign
Solution retrospective
What specific areas of your project would you like help with?
Tive dificuldades na parte de deixar o código responsivo e em colocar o ícone no button, aceito críticas para me orientar melhor da próxima vez.
Community feedback
- @WaRaGiSmYnIcKnAmEPosted about 2 months ago
Your solution is not very similar to what the challenge offers...
Here are my suggestions for a fix:
- To begin with, I recommend using the
<main>
tag for the main content of your page. - The header tags
<h1>
,<h2>
, ...,<h7>
should go in order to simplify navigation on the page. - You have a lot of values changing in
px
, which can have a bad effect when scaling the page and on mobile devices. For values that are the same everywhere, this is still acceptable, but it is better to set the dimensions and margins usingem
andrem
- You are abusing flexbox and because of this, the content is constantly trying to move somewhere. Try to cram all the text into
display: block
, and let the card itself remaindisplay: flex
. Everything inside will be easier to arrange when the elements behave like blocks - For mobile devices, you only need to change the image according to the media request and change the direction of the
flex-direction: column
- To the question of the picture. Use the
<picture>
tag to use a media request to change the image depending on the screen Widths. Example:
<picture> <source srcset="./images/image-product-mobile.jpg" media="(max-width: 640px)"> <img src="./images/image-product-desktop.jpg" alt="Product bottle image"> </picture>
<source>
is responsible for an alternative path for<img>
under specified conditions. Also, do not forget to specify an alternative textalt="Product bottle image"
.Keep making up more and you will come to the top!
Marked as helpful0 - To begin with, I recommend using the
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