3-column preview card for responsive layout design

Community feedback

• 

  P

  Jacksen•350

  @jacksen30Posted over 1 year ago

  Hello @samoina,

  Firstly, great job on the code! It's evident that you've put great effort and thought into this, it really shows. 😃

  I had to have a really good look to find where I could offer some constructive and helpful feedback. Below are a couple of areas I found that could benefit from some tweaks:

  Button Hover Issue:

  There seems to be a layout shift when hovering over the button due to the border being added. A simple fix is to move or include the same border width in the button's base state to maintain size consistency.

  Original Code:

  button {
  	font: inherit;
  	padding: 1rem;
  	border: none;
  	border-radius: 3rem;
  	background-color: var(--very-light-gray);
  }
  
  button:hover {
  	border: 2px solid white;
  	cursor: pointer;
  	color: var(--very-light-gray);
  }
  

  Refactored To Fix layout height change on button:hover :

  button {
  	font: inherit;
  	padding: 0.5rem 1rem;       /* Similar To The Design */
  	border: 2px solid white;    /* Moved from :hover to base state */
  	border-radius: 3rem;
  	background-color: var(--very-light-gray);
  }
  
  button:hover {
          cursor: pointer;
  	color: var(--very-light-gray);
          background-color: inherit;
  }
  

  CSS Refactoring for Button Hover Background Color:

  Rather than setting individual background colors for each button on hover, it's possible to streamline the code with inheritance. This can help reduce redundancy.

  Original Code:

  .button__sedans:hover {
  	background-color: var(--bright-orange);
  }
  
  .button__suvs:hover {
  	background-color: var(--dark-cyan);
  }
  
  .button__luxury:hover {
  	background-color: var(--very-dark-cyan);
  }
  

  Can be refactored down to:

  .button:hover {
      background-color: inherit;
  }
  

  Again, well done on the coding. These are just some suggestions to further refine it. Looking forward to seeing more of your work in the future! 💻

  0