Testimonial Grid Section

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • In your .box1 class, there seems to be a typo in the background-image property. The "no repeat" should be moved to the background-repeat property.

    If you want to define several properties on one line it is using background not background-image .Corrected, it would be:

    .box1 {
        grid-row-start: 1;
        grid-row-end: 3;
        background-color: var(--moderate-violet);
        background-image: url(./images/bg-pattern-quotation.svg);
        background-repeat: no-repeat;
        background-position: top right;
    }
    

    If you want to consolidate those background properties into a single background property, you can do it like this:

    background: var(--moderate-violet) url(./images/bg-pattern-quotation.svg) no-repeat top right;
    

  • Consider adding max-width: 1160px to constrain the content width on larger screens. Additionally, you can use Flexbox or Grid on the body element to center it more effectively.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  Rowan•210

  @rowanDeveloperPosted about 1 year ago

  Thanks a lot @MelvinAguilar! To be honest, your comment was really useful! I really appreciate your insight.

  0
• 

  Don Ana•740

  @anttiromppanenPosted about 1 year ago

  If your quote-image shows on development, the problem is probably related to the background url: https://stackoverflow.com/questions/57976049/background-image-does-not-work-on-github-pages

  If this the case, try changing the path "./images" to "/images" or "images", push to github and see if any of those fixes your issue

  edit: ↓ this probably fixes your problem

  0