Responsive Product preview

Hi @YourRat-webdev,

I checked out your solution and had a few observations:

• The card isn’t centered in the viewport because the body doesn’t stretch to fill the height. By default, the body only takes up as much height as its content, which prevents vertical centering. You can fix this by adding min-height: 100vh, ensuring that the body always fills at least the entire height of the viewport. This way, even if there’s little content, the card can be centered vertically. Additionally, remove the margin-top: 1rem on the body to avoid any vertical overflow that might push the content down and disrupt the layout.
• I noticed you’re using a media query for viewports 30.85rem (493.6px) wide and above. The card exceeds the viewport width on mobile devices between 493.6px and 589px, causing horizontal scrolling since the card is 590px wide. This might not be the best user experience.
• Regarding responsive design, media queries aren’t the only approach. Also, it’s important to be deliberate about the viewport widths you choose. Why 30.85rem specifically? There are many great resources on responsive design to explore.

Hope this helps!

I see you added flex, but your project didn't align to the center. The problem is you should add to your flex also min-height: 100vh; Currently, the height of the body is the same as the component in it.

Second problem: In mobile design you don't have space under the button. You put height: 38.125rem; that won't work well, it stops your card from being resposive. You can add padding-bottom here to add space. If you want to add height, yes, you can add max-height, but plese put heigher value then current height.

Hope you found this comment helpful :)