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

Product preview card component

gambi358β€’ 290

@gambi358

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


I don't know how to set the image in the mobile version to look like the original.

Community feedback

John Denverβ€’ 290

@jbidz

Posted

Hi there, good job on taking this challenge

Here are my suggestions that you might need to consider

  • To make the image responsive for every devices you could use picture element and display different images in different breakpoints using media attribute. The code will look like this:
<picture>
        <source srcset="image-mobile.jpg" media="(max-width: 600px)"/>
        <img src="image-desktop.jpg" alt="" />
</picture> 
  • To identify the main content of the page you want to wrap your entire component inside the main element. main element helps search engines and other web technologies understand the most important content on a page, which can affect how the page is indexed and displayed in search results.

Refer MDN main element

If you found this feedback helpful, please consider to mark this as helpful.

2

@catherineisonline

Posted

Looks good but you did the mobile version only and missed out the desktop version 😊 Also, instead of using div with the class box-container use main tag instead to get read of the report errors

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