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

used flexbox

i_d_s_l 270

@ilvdrskn

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


Hello everyone I used a flex container to arrange elements in the layout. I set adaptability through the max-width properties; I used relative font sizes and margins (as far as I can). Thank you in advance for your comments and criticism! If anyone has, can you share a guide on adaptive layout? I don't quite understand how to do it

Community feedback

Hassia Issah 50,830

@Hassiai

Posted

wrap <div class="attribution"> within the footer tag to fix the accessibility issue.

Give the body a background-color of pale-bule, change the value of the background-size to contain and add a background repeat of no repeat.

There is no need for the height in .cardholder , if you still want to give it a height change the value to auto. give .textholder a padding value for all the sides. this a responsive replacement of the height.

You forgot to give . submit a box-shadow. give .cardholder a background-color of white.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Marked as helpful

1

i_d_s_l 270

@ilvdrskn

Posted

@Hassiai Thanks a lot for the tips! Do I understand correctly that for greater responsiveness of the page, fixed height values should be avoided, so that the container itself sets the desired one depending on the size of the content?

0
Hassia Issah 50,830

@Hassiai

Posted

@ilvdrskn fixed height will make the content overflow on smaller screens, for a responsive content use padding top and padding-bottom values.

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