Product-Preview-Card-Component

Thanks for the feedback but is the fonts issue affecting my media queries? @bene-volent

@MuhammadZaidKhan No, everything is what it should be according to css file but on top, you are importing same font family twice instead of separated.

Other minor details/problems can be observed by you. Your solution is excellent but I do recommend you to check other peoples solution as well. I do it my self to learn how I can improve my code.

Thank you so much but honestly I'm worried about media queries it's working completely fine on my laptop but when I open it on my mobile it's not working can you look into it please @bene-volent

@MuhammadZaidKhan Ok you seem new to css, so let me give you some tips I got from others

1. Never set strict widths and heights to containers always you min-width,min-height,max-width,max-height to make content feel natural. As you can see, your content has fixed width and height, on mobile and if watched closely, on desktop they are pressed down together causing overflow(Important concept)
2. When working with flex, always remember, if you dont need to control your flex items to your will then its fine. But if you let them control your design, you are in trouble. So I would recommend always keeps your flex items under check by using gaps, flex-grow, shrink and basis.(Learn from MDN or WebDev)
3. Dont use px for things other than container and sometime dont even use them on that. Its a personal preference. You can use relative units as EM and REM (Read MDN Documentation)
4. Use semantics.

Yours fonts are ok. But what is messing you up, is your fixed heights and using left and rights to align your content instead of letting layout settle on its own. Its a beginner's mistake. You will grow out of it. I did the same when starting. I didn't know anything and started to build something. CSS is awful on that project and everything is forced to be fixed/placed together.

Don't worry too much. That's why I keep saying just go through others solution and see what mistakes you made. I have given hints regarding your mistakes instead of pointing to them. Read your code after this and see where these mistakes are and go through others solution or even mine.

My solution is also not the greatest but I can assure you, that you can learn a few things

Don't stress about these mistakes and learn from them. Web development is all about mistakes and learning from them.

Even if you create a perfect solution, after few days you will again think that "If i did it like that, it would be more easier to create than what i did". So don't think about it. Learn further and come back to this solution and correct it yourself.

Peace Out 😁

Thank you so much for the detailed reply. Means alot @bene-volent