I used sass and BEM

Community feedback

• 

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  Hey there Olaleye, congrats on completing the challenge.

  In regards to your background-image that keeps moving. I see it move in chrome when I click at least two questions (any two). If that's what you're referring to it's changing because of the background-position center and percentages. As each question is clicked, the answer adds to the height of the surrounding container which because of the background-position values it will re-position your background-image.

  Possible solution

  1. the div that has your background-image set it position: absolute with a set width and height. Then play with its positioning with left and top css property. Make sure its parent container is position: relative so it sticks within the parent container.

  2. another solution is to somehow change functionality on the checkbox toggle of question/answer. Have it so only one answer is revealed on click. Clicking another question would hide all other answers. This way the main container height doesn't drastically change and move your background image.

  --

  Side note. Add the gradient color to the body instead of the main container so it takes up the whole page.

  Keep on coding

  1

  ---

  

  Olaleye Blessing•355

  @Olaleye-BlessingPosted about 4 years ago

  @artimys Thanks, I will try your suggestions right away. And thanks for the side note, thank you.

  0

  

  Olaleye Blessing•355

  @Olaleye-BlessingPosted about 4 years ago

  @artimys I've fixed it using absolute positioning. Thanks for the suggestion, it really helps. You can check it out and more corrections are welcomed, thank you.

  1

  

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  @Olaleye-Blessing Awesome

  A few more extra to work on:

  1. Now that the gradient is in the body. I forgot to mention one more property to add which is the min-height: 100vh. vh is for the viewport height.

  2. Maybe center (vertically and horizontally) your main container on the body. There are few ways to accomplish but try it with flexbox. Apply to the body styles and if not familiar research each property for a better understanding

  display: flex;
  justify-content: center;
  flex-direction: column; 
  

  3. Add a bit of line-height to increase the paragraph line spacing for the answers so it's easier to ready.

  4. Nit picking here a tad. One of the line illustrations is not totally sticking to the edge of the top container

  Overall great job on improving your design. Keep on coding!!

  1

  

  Olaleye Blessing•355

  @Olaleye-BlessingPosted about 4 years ago

  @artimys thanks so much for your feedback. I've modified it. I've added the min-height, line-height and centered it. I've touched the background too but I'm not if that's okay. It kind of looks small. Thanks for the correction tho, I'm happy that I got a feedback with corrections, thanks.

  1

  

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  @Olaleye-Blessing

  Glad I could be of some help. The more you improve your solution the better prepared you're for your next one.

  Keep it up!! 👍👍

  0