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

Flexbox, Google

@carlin-mitchell

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


I know that there is a lot for me still to learn. My next goal will be to re-factor this project as I get more experience with best practices.

My main question is: Can I keep the background image centered when I resize the window in only one direction?

Community feedback

Adarsh Pratap 5,515

@adarshcodes

Posted

Hi @carlin-mitchell, first of all, welcome to this amazing community, and you did really nice work on your first challenge👏.

And yes there's a huge room to learn the best practices which you'll learn eventually by practicing. Just a suggestion from my side is to keep working on the project consistently and take a look at others' code but don't carry it away by the approach of others. Every one of us has our own style of coding the things you should learn is the best practice and what you like in others' code. Create your own style of code while keeping the best practices in mind.

For your question: leave the background image to the top only, it'll mess with the design if you centered it.

Congratulations on submitting your first solution🎉🎉🎉. It's a long and beautiful way to go. Keep learning and practicing. Happy Coding :)

P.S: take a look at your accessibility and HTML issues and try to fix them. And yeah, Every mistake is an opportunity to learn something new, so never miss it.👍

Marked as helpful

1
argel omnes 1,800

@argelomnes

Posted

Hey @carlin-mitchell,

You can. To keep the background image centered, you can remove the background-size declaration. Its default value is auto. So you can resize your window wherever you like and it will scale accordingly while maintaining its aspect ratio. Same with background-position: top;. You won't need it because the default value is top-left.

Marked as helpful

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