Skip to content
OverviewSolutions
4
Comments
3

Carmen Delber

@CarmendelberSpain80 points

I am digital nomad passionate about graphic, web, books design, illustration and everything that means to create something with sense and soul. I’m curious and restless, always looking for a new way to make things work better and learn from it.

I’m currently learning...

After obtaining a good level of HTML, CSS and a bit of Javascript, I am: - Improving my use of Flexbox - Learning responsiveness and accesibility - Learning CSS grid - Adapting my workflow to the use of Git - Understanding Javascript

Latest solutions

Latest 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).