A couple things I noticed Hamid:
On the main element you should remove min-height: 70vh.
The grids are overflowing in Chrome Inspector, you can try this:
.profile {
display: grid;
grid-template-columns: 45px auto;
}
Alternatively you could make the element a flex row.
I recommended to another user that they make a wrapper around each testimonial:
<div class="people">
<div class="testimonial__wrapper">
...Testimonial elements here...
<div>
</div>
.testimonial__wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
}
If you use space-between and gap it will stretch the div and you don't need margin/padding on the inner testimonial elements. You might need to add flex column to the people div in your layout.
Marked as helpful
@hamidMolaDev
Posted
Hello @scottmotion, "On the main element you should remove min-height: 70vh." i give it min-height because i wanted to centered the main when i use full screen and beside of that it's just a one content in page. but your recommendation was awesome and helpful, thank you for everything man. 👍🙏
@hamidMolaDev
Posted
one more thing @scottmotion, how you put code it feedback? how it works?
@hamidMolaDev its a bit tricky. use 3 backtick characters before and after, on separate lines.
(backtick)(backtick)(backtick)
some code
(backtick)(backtick)(backtick)
Marked as helpful
