Skip to content
Submitted almost 2 years ago

Order Summary using HTML/CSS/some flexbox

David Pelo•110
@DavidPelo
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 am not feeling confident in my stylings. I think everything looks great but I would appreciate any feedback on how I structured my HTML and CSS.

Community feedback

  • Adriano•38,290
    @AdrianoEscarabotePosted almost 2 years ago

    Hi David Pelo, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

    To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

    1. Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.
    2. Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

    Feel free to choose one of the two!

    Every Html document must contain the main tag, so we can identify the main content, to fix this, wrap the main content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

    The rest is great!

    I hope it helps... 👍

    0
    David Pelo•110
    @DavidPeloPosted almost 2 years ago

    @AdrianoEscarabote That does looks better, thanks!

    1
    Adriano•38,290
    @AdrianoEscarabotePosted almost 2 years ago

    @DavidPelo no problem, keep coding!!

    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