blog preview card+hover-on effect

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 10 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • The width: 100% property in the body tag is not necessary. The body tag is a block element and it will take the full width of the page by default.

  • For a responsive and resizable component, consider using padding to avoid border touching the image instead of a margin. Also, set width: 100% for the image to fit the size of the component.

    main.card {
        padding: 20px;
    }
    
    .img {
        max-width: 100%;
        border-radius: 15px;
        /* margin: 20px; */
        width: 100%;
    }
    
    .learning {
        /* margin-left: 25px; */
    }
    

  • Update the height to 100vh to utilize 100% of the screen and center it correctly.

    body{
        /* width: 100%; */
        /* height: 100%; */
        min-height: 100vh
       /* ...*/
    }
    

    Later, you can remove this margin:

    .card{
        /* margin: 100px; */
        /* margin-bottom: 25px; */
        margin: 1rem;
    }
    

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  Hassan Moataz•1,860

  @hassanmoaaPosted 10 months ago

  @MelvinAguilar Thanks a-lot Melvin i wasn’t knowing about the height replacing the margin, also you put some good notes in it, i’m grateful!

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @hassanmoaa!

  You did a very good job there!

  I have a very simple suggestion for improvement:

  • Since the title is a clickable element, it's nice to add cursor: pointer to it in addition to the color shift hover effect.

  📌 This gives the user a visual indication that the element is clickable, as obvious as it may look.

  I hope it helps!

  Other than that, you did a great job!

  1