RGhstx• 110
@rherndz
Submitted
!Segunda practica realizada! 😁🤞
🚀 ¡Cualquier comentario de ayuda o corrección de código es bienvenido! Estoy abierto a aprender y mejorar, así que no dudes en compartir tus conocimientos.
#HTML 🟠 #CSS 🔵
James Ebimobowei Osuobeni
@Ebibeni
All comments
@Ebibeni
Posted
Hi 👋 RHerndz. Good job on completing the challenge! I have some feedback for you if you want to improve your code.
-. Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen readers by adding aria-hidden="true" and leaving its alt attribute empty(I see you left yours empty): <img src="./images/icon-sedans.svg" alt aria-hidden="true">
-. Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here.
-. It is given that for Mobile the screen size is 375px. however, yours is set to 628px (actual figure). Your @media (max-width:700px) and @media (max-width:768px) are only for the border-radius and make the size and shape of your cards uneven.
**IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩 ** I hope you find it useful! 😄 Above all, the solution you submitted is great! Happy coding!
Marked as helpful
0@jsvigneshkanna
Submitted
Hi 👋, I built QR code component in reactJS and styled with tailwindcss. Please review my design and code.
This component is responsive to all devices and has dark-light mode theme
@Ebibeni
Posted
Great work 👋 Vignesh Kanna, You did very well with the design. Good job on completing the challenge
1- Amr_Hesham• 160
@amoorihesham
Submitted
please rate it.
any tip to make the wrapper height be auto cause when I didn't sit its height the button stick to the bottom of the box and when hover it the wrapper height increased to make the button border.
@Ebibeni
Posted
Welldone Amr_Hesham! You have done a great job on this project. I did go through your code and discovered that your media query for mobile is not correct. You have it set to 1020px instead of 375px. Here is how it should look like. @media (max-width: 375px) { .wraper { flex-direction: column; width: 330px; height: 100%; margin-top: 2rem; } }
IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩
1 - Mahin• 50
@boredmahin
Submitted
Any suggestion would be helpful
@Ebibeni
Posted
Hi Mahin, Your work looks great and I would like to add a few. You need to make the cursor turn into a pointer on hover. you can do that by adding the code to the hover stage.
Example.
.card__title:hover { color: var(--first-color); cursor: pointer; } .card__images:hover .card__img-overlay { opacity: 1; cursor: pointer; } .card__creator-data span:hover { color: var(--first-color); cursor: pointer; }
IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩
Marked as helpful
0 @annisa-rachma
Submitted
@Ebibeni
Posted
Hi Annisa, Nicely done Project you have here.
After looking at the work you have done I must commend your effort and work. Keep up the Good Work!
0- Davidson Aguiar• 320
@davidsonaguiar
Submitted
@Ebibeni
Posted
Hi Davidson, Nicely done Project you have here.
After looking at the work you have done I must commend your effort and work. However, I noticed that your Github link isn't working ( 404 error ). Try fixing that.
Keep up the Good Work!
0 - Rafael Macedo• 30
@strael12
Submitted
@Ebibeni
Posted
Nice one I think you need to improve on the dimensions for your div tags. The width should be around 60-70% of the height. The image is stretched. You can use the "object-fit: contain" to make an image contained to the size of any given div. Grid is a fine tool to use but as for a beginner i would prefer using DISPLAY:FLEX as it is easier to control for this type of content.
Try to solve these problems one at a time. Nice work.
0
