Skip to content
Submitted about 4 years ago

Testimonials Grid Using CSS Grid

Abdulwahab Sani•125
@aabsani
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

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?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Abdulwahab Sani•125
    @aabsani

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

  • Abdulwahab Sani•125
    @aabsani

    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!

  • Raymart Pamplona•16,040
    @pikapikamart

    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^

  • P
    Patrick•14,265
    @palgramming

    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

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