Responsive Order Summary Component

Ansly,

Your project looks awesome, i think the problem is that your are using percentages for your min-width and min-height and the values are a little high, remember that your card is relative to it's parent which in this case is the body element and if the screen was too big the card would be too big also and you could encounter problems in the long run.

try replacing the min-width and max-width custom properties on your main element to say width: 350px; it may change the layout a bit but you should be fine.

if you want your image to be large and than be smaller when you resize your screen your could try something like min-width: 320px; ( no screen should be smaller) and your max-width: 550px; which may change your layout as well or you could use media queries to make it responsive... one good tip if your not already doing so is use your developer tools when you encounter a problem that isnt obvious on your code and try using pesticide its a browser extension and free tool that selects all of your elements and adds a border to it to make it easier to design and layout content.

if you find this information useful please let me know by clicking the ^ icon under my profile picture in this comment section.

happy coding.