Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Landing page with Flex-box and Grid

@mariby21

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


First time using @media query i hope i did it.

Community feedback

Roy 600

@arkaroy135

Posted

Hello Mario, Hope you are doing well. We did a good job here. However I have some suggestions for you. You did this.

<div class="flex-box">
        <img
          src="/images/image-product-desktop.jpg"
          alt="product-image"
          class="image"
        />

        <img
          src="/images/image-product-mobile.jpg"
          alt="mobile=image"
          class="image-2"
        />

I would like to suggest use

<picture>
   <source media="(min-width: 1440px)" srcset="/images/image-product-desktop.jpg" aria-hidden = "true">
   <img src="/images/image-product-mobile.jpg" alt=" " aria-hidden="true">
</picture>

This will make the desktop-image appear whenever screen size is 1440px or greater, else it will show the mobile-image.

And also use this

<del class="price-2">$169.99</del>

del tag will make the cross through exactly in the middle of the price. Feel free to ask questions if you like. Happy coding.

1

@mariby21

Posted

@arkaroy135 thank your very much i try with picture element but i left it for next project i will try it :)

1

Please log in to post a comment

Log in with GitHub
Discord logo

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