Skip to content
Submitted over 1 year ago

Responsive page with flex

tomdu3•20
@tomdu3
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I couldn't divide evenly the boxes and don't know what is the reason that image takes more space on bigger screens.

Community feedback

  • Fer•3,970
    @fernandolapazPosted over 1 year ago

    Hi 👋, regarding your question:

    • The easiest way is to use Grid for the card and then divide it into two equal columns.
    .card-outer {
display: grid;
grid-template-columns: 1fr 1fr;
}
    • And note that there is a different image for each version. To make that change, the <picture> element is ideal:
    <picture>
<source media="(min-width: x)" srcset="images/image-product-desktop.jpg">
<img src="images/image-product-mobile.jpg" alt="description">
</picture>

    Please let me know if it works 🙂

    Regards,

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord