Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Card

Uche Ofatu 260

@Macnelson9

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm proud that I got to finish this challenge in a personal record time. I think I need to pay more attention to media queries and I will.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

I see you are on the roll today =)

Good job, well done!

The background is looping =) Add background-repeat: norepeat property, it could fix it. And don't forget about the main tag.

Marked as helpful

0

Uche Ofatu 260

@Macnelson9

Posted

@Alex-Archer-I Hey there man! Lol, I'm just trying to get better, and about the background, I wondered why it was different from the original sample, I'll try to do that. I think I'm having some difficulty with writing semantic HTML. I don't know really. If I include the main tag in my work, I'd have to display flex on the body, main tag and then the container also.. phewwww... That's hectic

1
Alex 3,130

@Alex-Archer-I

Posted

@Macnelson9

Well, there is could be quite a simple layout here.

Look, you need a main tag which will be the container itself. The image could be just inside main without wrapper.

<main class="container">
    <img src="" alt="">
    <h1></h1>
    <p></p>
    ...flex with info
    ...links
</main>

The main tag will control the width, so you just need to set the width of the image to 100%. And without positioning =)

Marked as helpful

0
Uche Ofatu 260

@Macnelson9

Posted

@Alex-Archer-I Okay. I'll give that a trial. Thank you, Alex.

1
Alex 3,130

@Alex-Archer-I

Posted

@Macnelson9

Oh, you're welcome. Really hope that could help =)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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