Skip to content
OverviewSolutions
4
Comments
3
Carmen Delber
@Carmendelber

All comments

  • Carmen Delber•80
    @Carmendelber

    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.

    Marked as helpful
  • Carmen Delber•80
    @Carmendelber

    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

    Marked as helpful
  • Carmen Delber•80
    @Carmendelber

    Hey! to center content easily, add 'display: flex;' and 'height: 100vh;' on the parent container (body) and 'margin: auto;' on the child (.container).