Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Testimonials Grid , but the grid wont wrap

@llr3v0ll

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I’ve met a few problems while doing this.

  1. I’ve tried watching yt , searching on the internet but couldn’t find a method for wrapping the grid that wont mess with the aspect of things.
  2. The quotes svg has the position absolute and when typing for example “top: 0;” it will move the quotes to the top of the page not the top of the article. Any idea of a fix?
  3. The review paragraphs wont fit the entire article height, and there is space left that is unused. Any idea for a fix?

Community feedback

@0xabdulkhaliq

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

BODY MEASUREMENTS 📐:

  • Use min-height: 100vh for body instead of height: 100vh. Setting the height: 100vh may result in the component being cut off on smaller screens.
  • For example; if we set height: 100vh then the body will have 100vh height no matter what. Even if the content spans more than 100vh of viewport.
  • But if we set min-height: 100vh then the body will start at 100vh, if the content pushes the body beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

1
P
Lo-Deck 2,020

@Lo-Deck

Posted

Ok, i've tried with your website and that is my solution I don't know if it's the best but maybe help you.

for the question 2: '''article { border-radius: 15px; padding: 2rem; box-shadow: 5px 10px 50px hsl(0, 0%, 81%); position: relative; }

.quotes { position: absolute; z-index: 0; top: 0; left: 22rem; } '''

and for the third i've just changed this: '''main { display: grid; padding: 0 0px; gap: 2rem; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; }'''

padding to zero.

and for the first I'm not sure what you want. If it's when you want to reduce the page or to turn into web mobile , uses the media queries.

Last thing the only YTchannel I know in English is slayingthedragon it was helpful for me Youtube slayingthedragon

Marked as helpful

1
00013519 110

@00013519

Posted

To the second question: I have put it as background image inside the daniel clifford section, and set the background-position-x value to 90%, so it is not going to the left completely

Marked as helpful

1
P
Lo-Deck 2,020

@Lo-Deck

Posted

Hi, for the 'position : absolute', you need to declare 'position: relative' in the article where you want to use it. Otherwise the 'position : absolute' uses the farthest ancestor.

mozilla mdn.

Hope to be useful.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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