@DavidMorgade
Posted
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: 40remin your.product-previewmedia 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
@zofia-mm
Posted
@DavidMorgade
Thank you so much! Now it's perfect! :)
