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

Responsive page with flex and grid

@GabrielNoss

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone. I need help to shorten a bit the horizontal distance in the statistics. I have been trying several ways and have not been able to. If anyone can help me, I would be grateful.

Community feedback

@VickyAzola

Posted

Hi! I tried to solve the problem using your code, and this seems to work.

  • You don't need a .between-div class, so I deleted it.
  • Added a padding to the stats.
@media screen and (min-width: 1024px) {
    .stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 0 80px 0 40px;
    }
}

Also, added a margin to the p on mobile.

.stats div p {
    color: hsla(0, 0%, 100%, 0.6);
    font-family: 'Lexend Deca';
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: .6rem;
    padding-top: 4px;
//
    margin-bottom: 25px;
}

Hope this helps!

Marked as helpful

1

@GabrielNoss

Posted

@VickyAzola Thank you very much Victoria. The desktop design took me quite a while to do. Your recommendation is very valuable.

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