@turtlecrab
Posted
Hey, kudos for making it pixel perfect(I think it lacks font-weight: 600 for heading and price though), but the layout only works for 2 exact screen widths that you hardcoded in css for body, for any in-between sizes the design is pretty much broken.
In your case the fix is very easy: just remove width, height and min-width from the body and set min-height to min-height: 100vh. This is a standard approach to center both vertically and horizontally with flex:
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
In general, we never want to hardcode body sizes like you did, we want our designs to be responsive(google responsive/adaptive design) so our site/app is looking good on every screen size. This is our first priority, and we must test our apps on all screen sizes(we can do it in Chrome DevTools or just simply by resizing our browser window). Making it 100% pixel-perfect is a great goal, but it's more or less among our last priorities.
Hope that helps.
Marked as helpful
@Teor99
Posted
@turtlecrab thanks for the advice, yes, the moment with responsive design and @media is not completely clear to me and I was looking for how to do it normally, it will help me a lot. 👌
