Skip to content
Submitted about 2 years ago

Resolution aware product preview card solution

zofia-mm•160
@zofia-mm
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

  • Did the design scaled nicely for you?
  • Do you have any tips for code organization? Am I overorganizing?

Community feedback

  • David•8,000
    @DavidMorgadePosted about 2 years ago

    Hello Fobya! congratulations on finishing the challenge and welcome to the frontendmentor community!

    If you don't mind I will try to answer your questions:

    • Well, the card scales good but it breaks a bit at tablet sizes, try using some relative units to define the size of the card, for example, width: 40rem in your .product-preview media querie of 701px instead of width: 50%, because when scretching the screen, the image gets too small because of the width of the container being too low!

    • You code CSS file looks well structured and explained, comments are always a great think to use, I think that you just used the necesary amount for this project, for a guy to come out and understand what each thing does.

    I would also like to give you a personal recommendation regarding the centering of your card, instead of using padding on your <body> and margin on your product-preview, try using flexbox on the body to center the component directly, you just need to give the body a min-height: 100vh to wrapp al the screen and then use flex to center like this:

    body {
  background-color: var(--color-background);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
}

    Hope my feedback helps you!, if you have any questions, don't hesitate to ask! you did a great job as a first challenge here

    Marked as helpful
    1
    zofia-mm•160
    @zofia-mmPosted about 2 years ago

    @DavidMorgade

    Thank you so much! Now it's perfect! :)

    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