Skip to content
Submitted almost 2 years ago

used flexbox

i_d_s_l•270
@ilvdrskn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

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,650
    @HassiaiPosted almost 2 years ago

    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
    @ilvdrsknPosted almost 2 years ago

    @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,650
    @HassiaiPosted almost 2 years ago

    @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

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