Skip to content
Submitted about 2 years ago

HTML, CSS, Grid, Responsive

thresholdā€¢50
@thresholdtech
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

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

  • Tertsegha Kpughur-Tule Mosesā€¢210
    @Mosestule2003Posted about 2 years ago

    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
    @thresholdtechPosted about 2 years ago

    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
    Tertsegha Kpughur-Tule Mosesā€¢210
    @Mosestule2003Posted about 2 years ago

    @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

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