Product Preview Card Component Solution

You don't need to use display: flex and all of it's properties on body for the Mobile layout as articles are Block element they will automatically start on new line

You will also need to refactor your HTML.One easy trick that will help with that is to start with the desktop design and see how many distinct blocks of content you have and put them in rectangle don't go super detail you just need a broad view.I see two rectangles one for the image and one for all the text content.Try rapping the image in one block level element and all the text content in one block level element this will make styling things easier

Remove the <span class="parted"></span> from your H1 tag

You can use a <picture></picture> tag to display different image based on your screen width

I took a look at your CSS and you don't need that many media queries. You can do this challenge with just one media query.

When working with cards (in my opinion) is best to use fixed width and height avoid using %. % make a page more responsive, but if not used correct it will break a page. Try these dimensions for the card.

• Use one div as card holder width: 550px; and height: 410px;.
• Divide this div in two parts left width: 275px; and right width: 275px;. Use the same height as the one on the card.
• For mobile width: 343px; and height: 610px.
• Divide in two parts top height: 240px; and bottom height: 370px;

Take it from here. See if you can manage to do this, if you need help let me know

for the prices. Comparing the old price to the new price, try putting both of them in a div and setting that div to display flex. e.g:

<div class="price_container"> <div class="new">New Price</div> <div>Old price</div> </div>

/* css */ .price_container{ display:flex; } .new{ margin-right: 12px}