Skip to content
Submitted over 2 years ago

Responsive order summary component using flexbox

Elizabeth Sotomayor•230
@elizabethrsotomayor
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

I found working with the SVG background image to be a challenge because it kept pushing the rest of the content down, but I was able to solve it with the help of Stack Overflow. I am not sure about the overall size of the component, as it looks maybe a little bit smaller in the screenshot, but with the font size being 16px that was the only way for me to go. When I changed the height of the parent container, the content ended up getting cut off at the bottom and it threw everything off. Does the 120vh that I've set for the wrapper container height match the specifications?

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hi, Elizabeth! 👋

    Congratulations on finishing your first challenge! 🎉

    Regarding your question, I would recommend making the body element as the main wrapper of the card element. After that, set a min-height: 100vh into the body element. This will make sure that it allows to grow if needed (like on mobile landscape view). Then, you can move all the styling from the wrapper element to the body element.

    As far as the pattern-background, I would recommend making it the background image of the body element. So, I recommend,

    • Setting the position to the top.
    • Stopping the background repetition
    • Making the size 100%

    All of those things can be done using CSS background properties.

    A few suggestions.

    • Headings must be in a logical order. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, those users might get confused. So, I recommend swapping the h5 with h2 instead.
    • I recommend adding rel="noopener" to any anchor tags that have target="_blank". This is a security essential for external links. I suggest reading the web.dev article to learn more about this.

    Let me know if you have any questions. I hope this helps!

    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