Frontend Quiz Responsive App

Community feedback

• 

  P

  Jayco•470

  @jayco01

  Posted 2 months ago

  Hi Jeromino,

  Awesome work! I am impressed with how closely your design matches the Figma files.

  I had one small suggestion that might help refine the user experience a little bit with the interactive elements like buttons. I noticed that when choice button becomes active (after clicking on my answer) and a border is added, it causes a slight "twitch" or shift in the layout as the surrounding elements adjust to the new border width.

  A common trick to prevent this is to give the buttons a transparent border in their default (static) state that's the same width as the border that appears on the active state.

  For example, if your active button has a 2px solid blue border, you could give the static button a 2px solid transparent border:

  /* For the button in its normal state */
  .my-button {
    border: 2px solid transparent; /* Claims the space for the border */
  }
  
  /* For the button in its active/hover/focus state */
  .my-button:hover { 
    border: 2px solid blue; /* The visible border */
  }
  

  01

  Marked as helpful