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

Single-Price-Grid-Component

straboush 290

@starboush-t

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@xaintobas

Posted

Hi @straboush,

Nice work. However, here are a few opportunities to enhance your design:

I noticed there is a lot of space below your .community div. To fix this, consider adjusting your grid container styling.

Instead of using this:

.price_grid_comp {
    display: grid;
    /* grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 2fr 1fr; */
    grid-column-gap: 0px;
    grid-row-gap: 4rem;
    /* height: 25rem;
    width: 58%; */
}

Try updating your code to:

.price_grid_comp {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
}

Using auto in grid-template-rows: repeat(2, auto); will allow the row height to adjust dynamically, removing the unnecessary space below your "community" div.

These adjustments will help improve your design. Let me know if you have any questions or need further assistance!

Hope to be helpful.

Marked as helpful

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