Testimonial grid section

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi there!

  I recommend making the quote SVG as a background image of the testimonial card. Then, position it with background-position property.

  I think the background image does not show because you did:

  #featured {
    background-image: url(./images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background: var(--moderate-violet);
    position: relative;
    z-index: 0;
  }
  

  The background shorthand property will overwrite the previous background properties. Be aware of shorthand property.

  The problem with shorthands in CSS - YouTube | Kevin Powell

  To make the background image shows up, you need to change the background to background-color—or put the previous three background properties below the background property.

  I hope this helps. Happy coding! 👍

  Marked as helpful

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  SUGGESTION 💡

  • During inspecting your code i found that you overused the absolute positioning for main element. Because the you already centered the main with grid layout and you still using absolute which serves no purpose in this case.

  ---

  • As developers we want to reduce our lines of code be refractoring it, without writing efficient codes we can't become a better developer. So kindly remove these style rules from your css file for optimizing you css file

  ---

  .container {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
  }
  

  ---

  .

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

  Happy coding!

  Marked as helpful

  0
• 

  mylesh•90

  @myles-portfolioPosted over 1 year ago

  Removing the .container class from <main> seemed to enable the absolute position of the .quote-icon img to not break when responsive. :)

  I would still like to know how to put SVGs as background-images. For some reason, they never appear in the viewport when I add them that way. My plan is to play around with them in Codepen.io to figure out how they behave.

  0