@thgsnakeSubmitted almost 2 years ago
I was not able to reduce the image of the eye (view) when passing. I would like your opinion and feedback. Thanks.
Duber Velez
@dubervelezAll comments
- @dubervelezPosted almost 2 years ago
Hi, great job!
I recommend you assign the styles to the images through a class, because you are assigning the same width to the two images through the img tag. You can assign a class to the image that you use in the hover and modify its dimensions, since in this case both are having a width of 250px and that is why it looks so big.
Marked as helpful0 - @cruz-jerwin15Submitted almost 2 years ago
Good day,
This is my third challenge here in frontendmentor. All your feedback will help me a lot in my coding skills. Thank you.
@dubervelezPosted almost 2 years agoHi Jerwin! as a suggestion you can remove the width:376px; and change it to a max-width:376px; to improve the adaptability of the design to small screens. So when they find screens with a width less than 376px the width of the container will be reduced. Similarly, place the property object-fit: cover; to the image.
To achieve the padding between the elements and the container, you use that property with all the elements, you could use it only in the container and in this way there would no longer be a need to use it in the elements.
great job!
1 - @choacvSubmitted almost 2 years ago
En el servidor local se muestra el ojo al hacer hover sobre la imagen, no sé porque al desplegarlo en github no aparece el ojo.. no sé cómo solucionarlo
On the local server the eye is shown when hovering over the image, I don't know why when deploying it on github the eye doesn't appear. I don't know how to fix it
@dubervelezPosted almost 2 years agoSaludos!
Para solucionar lo de la imagen del ojo, puedes modificar la ruta que tienes en el archivo .css, escribe la ruta de la imagen entre comillas y utiliza la notación de punto para escribir la ruta, así: url("./images/icon-view.svg"). te recomiendo para los próximos proyectos utilizar esta notación ya que en ocasiones al desplegar en github puede presentar ese tipo de problemas.
Buen trabajo!
Marked as helpful0 - @ralphvirtucioSubmitted almost 2 years ago
Your feedback will help me to improve
@dubervelezPosted almost 2 years agoGreat job, the design very similar to the original
My only suggestion is to change the max-width of the main tag from 100% to another value, for example 600px, in this way it would improve the responsive, because there are resolutions where the containers can be very large.
Good day!
Marked as helpful0 - @Abdul-ganuineSubmitted almost 2 years ago
This is my second project any advice or suggestion is very welcome
@dubervelezPosted almost 2 years agoHi Abdul Ganuine. Good job, according to the responsive design I have some suggestions:
-You are using two containers that have the class "card" and "container", the "container" class is only used to have a margin between the content and the container where you use the margin and width properties of the class. You could eliminate that class and use only with the "card" class and to make that separation between the content you use the property padding: 25px.
-To improve the responsive I recommend you modify the height property to "auto" for the "card" class container, because there are resolutions where the content goes out of the container, the other property to modify would be to add a min-width, it can be 260px to make it look better on different devices.
good day!
Marked as helpful0
