Skip to content
Submitted over 3 years ago

Mobile First Site using HTML, CSS and Flexbox

Anubhav Singh•70
@AnuRobo
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

Where do i will get the original solutions of the challenges?

Community feedback

  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    You should put your main background on the <body> tag

    Marked as helpful
    1
    Anubhav Singh•70
    @AnuRoboPosted over 3 years ago

    @palgramming Yes you are right instead of making a separate container for background work it's better to use <body> tag. Can you please tell me how to determine or estimate the parameters of the cards in this challenge? It would be a great help

    0
  • j5•2,290
    @jmnyaregaPosted over 3 years ago

    Hi @AnuRobo, good job on the challenge. I have a few suggestions:

    • Avoid setting solid heights, instead of height: 100vh use min-height: 100vh.
    • To remove the horizontal scrolling, add overlow-x: hidden on the body.
    • Prefer relative units to px, this allows users to adjust font sizes from their browser settings.
    • Wrap your card with the HTML 5 tag main.

    Happing coding 🙂

    Marked as helpful
    1
    Anubhav Singh•70
    @AnuRoboPosted over 3 years ago

    @jmnyarega Thanks for your suggestions as a newbie, I am working on it. Can you please tell me how to determine or estimate the parameters of the cards in this challenge? It would be a great help

    0
    j5•2,290
    @jmnyaregaPosted over 3 years ago

    @AnuRobo

    • In this case, you can use the width of the card image.
    • Let the content inside the card figure out its height.
    • You can use your eyes 🙂 to approximate the padding & margins around the content. But, if you want to be pixel perfect use tools like Figma to measure the spacing, widths & heights.

    That said, don't let perfection be the enemy of good. I would rather you focus on the fundamentals as you are working on these projects. Don't give room for frustrations.

    • Layouts (flexbox, grid layout)
    • Box model ( width, height, padding, margin, border)
    • Typography

    All the best.

    Marked as helpful
    0

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