Product preview card component solution

👾Hello Flor, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

You've used FLEX to create this component this is fine, since is working. In my opinion a better approach is by using GRID.

For example to build this component with 2 columns all you need to do is create a main block to hold all the content (you can use <main> to wrap), set its width as max-width: 900px (its the container size) and display: grid / grid-template-column: repeat(2, 1fr)(this means that your component will have two columns with 50% of the container width each thats 450px).

👋 I hope this helps you and happy coding!

Hi Flor, good job on this challenge! Desktop looks perfect but here's a tip on how to start getting the layout respond for mobile.

Starting with #conteiner change width to 100% and height to auto and add flex-direction: column. On your #img change the width to 100% and since you are using background-image you'll need to set the correct background-image url, add either padding-top to give the element some height or you can use the newly introduced aspect-ratio. Spotted a minor mistake, background-repeat should be set to no-repeat rather than none

Next, you'll need to sort out the border-radius. I'd recommend to apply it on the #conteiner and adding overflow: hidden to make the rounded corners visible. I would also recommend using the picture tag instead of background-image as you can use media queries to set the image you want to show.

example:

<picture>
    <source srcset="/desktop-img.jpg" media="(min-width: 768px;)">
    <img src="/mobile-img.jpg">
</picture>

I hope this helps!

Hey looks great. To improve on the mobile aspect - consider doing the following:

1. try mobile first approach - build from bottom up - from smaller devices and up to larger devices. This is a great approach.

2. Also, consider using media queries to add in responsiveness to your design.

Otherwise, great effort, looks nice :)