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 - Basic Static Webpage

@wilbros

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


Basically, almost similar to the Results Summary Challenge so I was able to finish this faster. Just a minor problem with the media query, whenever I try to check Chrome Dev Tools, my flexbox direction doesn't adjust the layout correctly. I need to toggle device toolbar first before it corrects the layout. I was thinking if I add flexwrap, it might fix it.

Community feedback

Hassia Issah 50,810

@Hassiai

Posted

Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

For a responsive image that will change the images at different screen sizes use the picture tag. For more click here

To center .container on the page using flexbox, replace the height in the body with min-height: 100vh.

in the media query, give .container a fixed max-width value instead of a padding. max-width:400px which is 25em/rem, give .panel1 and .panel2 a width of 100%.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Marked as helpful

1

@wilbros

Posted

Thanks, @Hassiai ! I'll keep these in mind. I will try and revise my code for this challenge.

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