Skip to content
Submitted almost 3 years ago

HTML, CSS, Grid, Responsive

threshold•50
@thresholdtech
A solution to the Social proof section challenge
Preview (opens in new tab)Code (opens in new tab)

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 😊😊😊

Code

Please log in to post a comment

Log in

Community feedback

  • Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003

    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.

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