Submitted 2 months ago

Responsive testimonials section using CSS Grid

Code-Me-Well•150

@Code-Me-Well

Preview site View code

This is a solution for...Testimonials grid section

HTML
CSS

2junior

Design comparison

SolutionDesign

Solution retrospective

What specific areas of your project would you like help with?

How do you guys make the picture in the first block, which is Daniel's, work? It genuinely took me a whole day, and it still only appears when I hover over it.

Community feedback

Marzia Jalili•4,530

@MarziaJaliliPosted 2 months ago

Congratulations on finishing the project!

Here's a simple suggestion:

Using the grid property for this challenge is the most concise way, buddy!

set the code below in the body selector to center the card:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Make sure that the card is the only child element of the <body>.

If not wrapp everything nested inside <body> with the <main> element. It will look something like this:

<body>
  <main>
    <!-- every element nested inside -->
  </main>
</body>

It definitely works!

Also, about the image of quotaitions, you can use the background-image property for it:

First give that first element a name so we can select it and then set the code below for it:

.first-element {
  /* set the image */
  background-image: url("path-of-the-image");
  /* prevent repeating */
  background-repeat: no-repeat;
  /* position the image */
  background-position: top right 10%;  
/* 10% for the right because it's a bit away form the right border */

The web looks great overall, no cap!

😁😁😁

Marked as helpful

Andrey•2,700
@dar-juPosted 2 months ago
Hello Code-Me-Well!

If you want to fix your code specifically, you need to control the image position, remove its z-index or set it to 0. Set the H4 header to a z-index greater than 0 to cover the image, also position it as a parent block position: inherit;

I recommend connecting such images via CSS using background-image, it's just a couple of lines and you don't need to bother with positioning
Marked as helpful
0

Please log in to post a comment

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