I personally found replacing the image on screen resize from mobile to desktop a huge challenge. Finally used the 'display: none' property and it worked. Feel free to let me know if there's any other way I could've done it. Also, I'd appreciate feedbacks on the design in general.
Hey! you can also use the image as background of a div in css and then change the image on the desktop media query:
div {
background: url('../images/image-product-mobile.jpg') center;
background-size: cover;
}
But I think the solution of picture would be more correct in terms of accesibility and semantics.
I found it difficult to align the current price and old price design until I found out that it would be easy by putting the elements in a table data cell and adding display : table-cell; to the stylesheet.
Hey! You can use flexbox to align both prices too:
<div class="card__prices">
<p class="price-main">$149.99</p>
<p class="price-deleted">$169.99</p>
</div>
You need to add display:flex; and align-items:center; to the parent card__prices
Hey! to center content easily, add 'display: flex;' and 'height: 100vh;' on the parent container (body) and 'margin: auto;' on the child (.container).
