Product preview card component just html and css

Hello,

I'm happy you got to this point on the project despite having 2 weeks of knowledge only. I suggest to keep practicing the challenges here in FEM and they will help you a lot. Also, don't be afraid to google search, but don't google search the solution. Google search the process that you want to achieve and try to implement it on the problem.

I use @media queries to set conditions for interactiveness when I am designing for mobile. Here is a great resource about media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries.

I hope this helps and keep working hard!

Hello!

I'm happy to see you got this far on the project! I know you said you would come back to this project, but I figured I would leave a comment to help you get there sooner/easier (hopefully). I recently also learned responsive design and successfully implemented it using @media queries. A media query is a way that lets your webpage respond to certain conditions. When I am designing for my mobile designs, I use the following syntax:

@media (max-width: 1380px) { .wrapper { width: 400px; } }

This is an example of my page needing to do something different when the width of the page goes below 1380 pixels. You can think of it like "Once my page goes below 1380px in width, apply the properties inside the curly braces {}" Hopefully, this example is enough to get you started; this technique can be used for a lot of topics and is a great place to start.

An alternative method is a CSS library called Bootstrap; personally, I do not like Bootstrap, but many do like if because it makes resizing websites very easy. Here is a link to the bootstrap documentation for its responsive grid design: https://getbootstrap.com/docs/4.0/layout/grid/

I hope this helps! Elias