Result Summary page with flexbox and media query for responsiveness

Community feedback

• 

  lastiroko•130

  @lastirokoPosted over 1 year ago

  For the gradient use linear gradient. Like this:

  background-image: linear-gradient(hsl(252, 100%, 67%),  hsl(241, 81%, 54%)); 
  

  (edit with the right colors) Linear gradient colors goes from top to bottom firstColor = top, secondColor = bottom

  The main body can and can also be a grid but to get that format with a grid you have to set grid to:

  grid-template-columns: 1fr 1fr;
  

  but make sure you nest the two sections in one div and target that div giving it a grid and the grid-template-columns with the value above. You can also use bootstrap rows and cols.

  Lastly if the gradients are right you don't need to make the score circle fade.

  Marked as helpful

  0

  ---

  

  Apah•280

  @apah-devPosted over 1 year ago

  @lastiroko thanks for the reply. I'll try out the background-image gradient again. I did make the body a grid initially but i somehow reverted to a flex which worked fine especially with my media query. i'll test out the grid option as a personal challenge and see how it goes. thanks once again

  1
• 

  Apah•280

  @apah-devPosted over 1 year ago

  I'd also love to know how the made the button with the result fade along the border at the bottom

  0