Responsive preview card using flexbox

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 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.

  ---

  FIXING INCOMPLETE TRANSITION

  • Currently the Hover effect which has been applied for the component (.button) has an issue in transition property, It's simply because you've been using it wrongly.

  ---

  .button:hover {
    .....
    transition: ease-in-out 0.7s all;
  }
  

  ---

  • Due to that whenever the user hovers the component it will smoothly animate but as soon as the user get out of hovering area the component itself will suddenly goes to it's initial state without smoothness as like it's starting state.

  ---

  • To fix this we need to declare the transition property on normal class, i mean the class where we not linked to any pseudostates like hover, active etc.

  ---

  • These are the fixed css rules,

  .button {
    transition: ease-in-out 0.7s all;
  }
  .button:hover {
    outline: #fff 2px solid;     // Use outline instead of border to prevent layout shifts
    background-color: transparent;
    color: #fff;
  }
  

  • Now you will get a smooth-in-out transition effect without sudden drop during hover.

  ---

  • I would recommend you to read this Transitions Reference article by MDN to get an overview with it's usecases.

  ---

  .

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

  Happy coding!

  Marked as helpful

  0
• 

  Cyuzuzo Bienvenu•220

  @bienvenudevPosted 7 months ago

  Hello!

  Well done, here are some things I notice that you may need to change/add:

  • You should always have a main tag in your body
  • I'm getting some horizontal scrolling
  • Media queries must always be defined in rem or em not px
  • It's better for performance to link fonts in the html head instead of css imports
  • Font size must never ever be in px (https://fedmentor.dev/posts/font-size-px/)
  • Always include a full modern css reset at the start of the styles to provide a clean foundation for your project. (Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/)

  Additional resource:

  • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

  I hope these tips and resources are helpful! Feel free to connect and ask any questions you might have.

  Happy Coding!

  1