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

Mobile first using HTML and CSS

Senay 150

@Senay-Fekadu2

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


I have just restarted this challenged and fixed the issue pointed by some members. I committed a change on git but it wouldn't show the new preview that is why I restarted the challenge

Community feedback

Hafizan Adli 1,190

@hafizanadli

Posted

You can center your component with this:

.main-container {
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items;
    background: hsl(0, 0%, 95%);
    font-size: 0.9375rem;
    font-family: 'Lexend Deca';
}

and try using semantic html instead of using only div tag.

the rest is good, responsive enough well, great job!

Marked as helpful

0

Senay 150

@Senay-Fekadu2

Posted

@hafizanadli thanks for the feedback the vertical alignment wasn't centered and it was bothering me . but if I use display: flex; on the container it will put the image and the white part side by side since I have two child divs in the container div

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