Skip to content
Submitted over 2 years ago

product-preview-card-component

Alieu•190
@alieuk61
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

Solution retrospective

I created a product preview card, the desktop design was done fairly well, however, I had a few problems with media query and trying to position the card in the centre of the screen when the width was smaller. Can I please receive some feedback on the project, thanks a lot :)

Community feedback

  • Bernardus•1,095
    @BernardusPHPosted over 2 years ago

    Hey ALIEU here is my goto for centering in the middle of the screen:

    body{
min-height:100vh;
display:grid;
place-items:center;
}

/* Please use a main element its good practice. */

    this is a good starter. You can use this with the mobile and desktop media, just play with the width and height and also the margin and you will be good

    1
    Alieu•190
    @alieuk61Posted over 2 years ago

    @BernardusPH thank you very much :)

    1

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