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 Component using CSS Flexbox

@kaykaym01

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


Personally struggled with sizing the image correctly using Flexbox. Any suggestions ?

Community feedback

@asmaa-elfatayry

Posted

hi Kayla, you did a great job but in the folder of images you have two images for the product one for desktop and one for mobile so you should make the background with the CSS background-image property and set it with the image for desktop and when we get the screen of a mobile 375px change it with responsive to be the image for mobile hope that will be helpful https://www.w3schools.com/cssref/pr_background-image.asp https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

to remove accessibility issues you should put all the content of the body tag in main tag <main>

</main>
0

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