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

Product Preview Card

Justin 10

@dic-key

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Femi-Bright

Posted

Hi Justin! NIce Attempt. Try to fix the Accessibility issues (You can do this in the View Report section). I noticed the web page is overflowing on my laptop thereby adding an horizontal scrollbar

i want to suggest you remove the width, it should still work fine.

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(30, 38%, 92%);
    /* width: 100vw; */
    height: 100vh;
}

Marked as helpful

0

Justin 10

@dic-key

Posted

@Femi-Bright Thank you for your comment. I removed the width like you recommended, but still had a scroll bar from the "height: 100vh" that I didn't like. I ended up moving the footer inside the container so it is directly under the card. To have it centered underneath, I changed the flex-direction of my container to column. Thanks again!

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