Skip to content
Submitted over 2 years ago

Order summary component | CSS, flex-box

Kulek•240
@kkulek
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 have a trouble with adding to my code responsive background for the desktop. I've tried a few things, but just can't position it well.

Little help would be much appreciated. Thanks!

Community feedback

  • r2•170
    @r2yoPosted over 2 years ago

    hi Kulek, good work!

    the problem is you add a image as background-image in the body , that means it will stretch with body's width, my solution is you can add an img tag inside the body but not in your container then add these styles into your img tag:

    display: block; position: absolute; z-index: -1; top: 0; width: 100%;

    Marked as helpful
    0
  • Kulek•240
    @kkulekPosted over 2 years ago

    Hey r2, thanks for the feedback.

    You're right - background-image in the <body> wasn't great idea.

    I tried your suggestion but didn't quite understand what you meant.

    I just added <main> tag in HTML and in style.css changed body to main (to transfer all styles into a proper tag: <main>).

    Now the background-image is responsive and I'm happy with this challenge.

    Sure, I could work on this more, but at the beginning of my training, I think it is better to work on the next challenge.

    Peace!

    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