Skip to content
Submitted over 3 years ago

Testimonials Grid Using CSS Grid

Abdulwahab Sani•125
@aabsani
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

The background quote marks for the top left div simply wont show. I have double checked the url to make sure the path name is correct but still isnt visible. The image doesnt apppear anywhere on the page. Help please?

Community feedback

  • Abdulwahab Sani•125
    @aabsaniPosted over 3 years ago

    successfully fixed everything, thank you to @palgramming and @pikamart for the feedback.

    0
  • Abdulwahab Sani•125
    @aabsaniPosted over 3 years ago

    Hi! Thanks a bunch i have changed the path by going up a level and it worked! And i have checked my repo link and it is working fine. Try again perhaps?

    And true... i inspected my grid since before uploading solution regarding the layout issue and i tried to fix it but couldn't figure out why. So it is unnecessary to specify height and width of my container?

    I will fix these errors and upload the new solution, cheers!

    0
  • Raymart Pamplona•16,100
    @pikapikamartPosted over 3 years ago

    Hey, great work on this one. The layout in desktop is good, but the mobile state and the responsiveness is not present.

    Regarding your query. You repo link does not work, fix that first. For the background-image, I tweak it since I can't see the repo, instead of using background-image: url(images/bg-pattern-quotation.svg); use background-image: url(../images/bg-pattern-quotation.svg);. I added ../ it means go up top by one level.

    One suggestion is that:

    • On the wrapper selector, remove the height:100vh, if you inspect your layout, you will see that the wrapper is not really capturing the whole grid, because it is only limited to what remaining viewport's height there is. Instead, use min-height: 100vh or you could just omit/remove the height property.

    The most important part is that , you must create a breakpoint, creating layouts so that your site will be responsive and mobile friendly. Right now those are missing, addressing it will be awesome.

    Still, good job on this one^

    0
  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    Two thing

    1. In desktop view the layout is not centered in the browser window
    2. The design will not transition small enough to get to mobile view
    0
    Abdulwahab Sani•125
    @aabsaniPosted over 3 years ago

    @palgramming much thanks! so should i center the layout using flex of using margin: 0 auto?

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord