Skip to content
Submitted about 2 years ago

Product Preview Card

StephenAlcantara•140
@StephenAlcantara
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello Stephen, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

    Here's some tips to improve your solution:

    You need to include the title for you PAGE. Do that inserting in the <head> the tag <title> → `<title>Product preview - Front End Mentor</title>

    To make the container aligned vertically, a better choice is to use flexbox instead of margins.I saw that you've used margins and position relative to give the container its alignment, this works but is really tricky to control all the content. My suggestion for your is to use flexbox to create this alignment. For example, first of all add to the body min-height: 100vh to make the body display 100% of the browser screen size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

    }
body {
    min-height: 100vh;
    background-color: var(--accent200);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-text);
    font-size: calc(8px + 0.390625vw);
    /* position: relative; */
}

.container {
    display: flex;
    border-radius: 0.5rem;
    /* position: absolute; */
    top: 50%;
    left: 50%;
    /* transform: translate(-50%, 0); */
    width: 100%;
}

    👋 I hope this helps you and happy coding!

    Marked as helpful
    1
    StephenAlcantara•140
    @StephenAlcantaraPosted about 2 years ago

    @correlucas I really appreciate this beg help! This will help me a lot in the future!

    1
  • Engr. Fisayo Michael Animashaun (MNSE, FMP®, COREN)•330
    @fmanimashaunPosted about 2 years ago

    Nice work. I like your coding approach. But I feel you should remove the flex on the body to prevent breaking your layout as you move from desktop to mobile view.

    0

Please log in to post a comment

Log in with GitHub

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