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

Order Summary

@CosmicGarou18

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I just want to ask that if i use a min-height or width on the main container,why don't the children take percentage values for their heights or widths? Also, i dont know why but the solution is showing up different on the comparison slide than the actual one

Community feedback

Tushar Biswas 4,080

@itush

Posted

Interesting question 😁

  • When you use min-height on the parent element(not explicitly defined), the child element cannot take percentage values for its height because it's calculated based on the height of the parent element.

  • However, when you use height on the parent element or specific height values like 50em, 500px, or 50vh on the child element, it works because the height is explicitly defined. This is how CSS is designed to work.

  • I hope this explanation is somewhat helpful for you🤞

Marked as helpful

1

@CosmicGarou18

Posted

@itush alright I understand but then how should i make the children element responsive, and also i wanted to ask why do my flex items shrink even when I turn it off

1
Tushar Biswas 4,080

@itush

Posted

@CosmicGarou18

  • Setting height, min-height, or max-height on the parent element defines how the parent will behave in different scenarios. These CSS properties control the height of the parent element and determine how it will expand or shrink based on its content, available space, or specified constraints.

  • To make the child element responsive at different breakpoints, you typically need to apply different dimensions to the child element for each breakpoint. This can be achieved using CSS media queries, which allow you to apply different styles based on the size of the viewport or other conditions.

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