blog preview card main

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 8 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • You have used media queries to change the width of main component. Instead of doing this,

  main {
    width: 300px;
  }
  
  @media (min-width: 750px) {
    main {
      width: 400px;
    }
  }
  

  • You can use max-width which helps you to write css efficiently, for example

  main {
    max-width: 400px;
    margin: 0 1rem;
  }
  

  • We additionally add margin for horizontal axis with value of 1rem (about 16px) this will help your component to change it's width until it reaches 400px of width.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0
• 

  Harsh Kumar Dwivedi•740

  @Harsh-Kumar-DwivediPosted 8 months ago

  Hi @LucasGitHubx,

  Nice Solution !

  I would suggest following:-

  In comparison to the given design, active states effect is not present. I think you should add following code:-

  main:hover {
  box-shadow: 20px 20px var(--Black);
  }
  
  main:hover h1 {
  color: var(--Yellow);
  }
  

  Hope it is helpful !

  Happy Coding !

  0