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

HTML, CSS, Grid, Responsive

thresholdā€¢ 50

@thresholdtech

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi guys,

This is my second attempt.

I'm messing up with the code to make it more similar, but I am perplexed about these things:

  1. The first section: the title "10,000 ....". How to make it more identical to the example? as I added the <br/> to make it the same. I make a grid between the "10,000" title and star review by 50% and 50%.

  2. The card deck. There're two issues here: a. How to add the space between the card? Mine is larger than the example, I tried to add the margin, but it doesn't work. b. When it comes to mobile view, the space between the cards gets larger. Guess it's the same with above T_T. Help me....

So, any advice or suggestions would be appreciated. TIA šŸ˜ŠšŸ˜ŠšŸ˜Š

Community feedback

@Mosestule2003

Posted

Hello there, really love your work flow šŸ™‚šŸ‘, Just a few thing I believe if you change you will get a better result.

  • First off try this Body{ Display: flex; Align-items: center; Justify-content: center; This will help align your work container directly in the middle.
  • secondly for me to Match the solution I created a parent grid container and did Grid-container{ Display-grid; Grid-template-columns: repeat(1, 1fr) Grid-auto-rows: minmax(100px, auto). } With doing this I created two grid item container which then will allow both to occupy the top and bottom of the grid container, as per the repeat (1, 1fr).
  • Thirdly try creating sub- grid items for each grid-item container. In this case two sub-grid-items containers for the top and three for the bottom( this is were you the. Put the content of your hero cards).
  • With this I believe you will have a much derived outcome. Hope this was helpful.
0

thresholdā€¢ 50

@thresholdtech

Posted

hi @Mosestule2003,

Many thanks for your feedback, l really appreciate it. I'm not really clear (yet) about that, but I will study them really, and if you don't mind I will learn from your code (I just checked it). You seem pretty good at your solutions. Good luck with your journey.

Happy coding!

0

@Mosestule2003

Posted

@thresholdtech I really appreciate the fact that your willing to learn even though at some point you might make a few mistakes. But it always good to keep going. And if you do have any problems, you can contact me and I will help out. Happy coding šŸ™‚

0

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