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

3 column preview card component

Kehinde 660

@jonathan401

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


when i try to view the cards on a mobile device, the first card is not completely shown but when i try adding a height of 100% to the card wrapper everything seems okay except that the rounded corners on the card wrapper disappears i hope you could give me insight on how to solve this.

Community feedback

Byron 2,180

@byronbyron

Posted

Hi @jonathan401

Try this for the body:

body {
    min-height: 100vh; /* min-height instead of height */
    padding: 88px 1rem; /* a bit of spacing above and below for mobile */
    font-family: sans-serif;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

for the rounded corners on mobile:

.card-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow-x: hidden;
    border-radius: 9px;
    max-width: 300px; /* Add the max-width here */
}

/* then remove the max-width on screens larger than 992px */
@media (min-width: 992px) {
    .card-wrapper {
        max-width: none;
    }
}

Marked as helpful

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