Submitted almost 2 years ago

Responsive page with flex and grid

@GabrielNoss

A solution to the Stats preview card component challenge

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.

Code

Please log in to post a comment

Community feedback

Victoria Azola Silva•1,290

@VickyAzola

Posted almost 2 years ago

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

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