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 solution using CSS Display Flex

@Julio-Souto

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 used fixed heights as a way to make the image height scale with the container height instead of shrinking as the resolution of the page lowers. Would there be a way for the image to fill the containers height when height set to auto?

Community feedback

P

@Eileenpk

Posted

Hi Julio-souto, your project looks good.

To answer your question regarding how you used fixed heights, I see that you used

body{ height: 100vh; } and percentages to set the height and width of the children's elements.

In CSS, percentages used for height and width are not considered fixed values, but rather relative to the size of the parent element.

When you use a percentage value for the height or width of an element, the size of the element is calculated based on the size of its parent element. For example, if you set the height of an element to 50%, the element will be half the height of its parent element.

This means that the size of the element can change depending on the size of its parent element. If the size of the parent element changes, the size of the child element will change proportionally.

In contrast, fixed values for height and width, such as pixels or inches, are not relative to the parent element and will not change based on the size of the parent.

Hope you found this helpful!

Marked as helpful

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