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

html and css

@Fikayomi31

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


Have difficulty in background-image in the css

Community feedback

Mebo David 130

@meistens

Posted

Hey there. Checked your code and honestly, I don't even know where to begin.

Your HTML file got some messy code, CSS file is all wrong and a nightmare to read.

My advice is you should debug and make changes using your browser dev tool or rewrite it all from scratch and take a refresher on html and css (honestly, the best option right now).

1

@Fikayomi31

Posted

@meistens have starter the refresher on css and html

0
nikoProg 120

@nikoProg

Posted

Open the developer console(F12 or right click > inspect) and start editing HTML and CSS directly as you view the page. This can help when you can't be quite sure what part of your code is changing what part of your page.

Body's min-height is 600vh, which means 600% of your user's viewport height. This was the most jarring thing for me, because it immediately shows in the design comparison on the solution page. Could you share why have you decided to write that?

Also, if you truly get stuck on something, but it is not too big of a project, maybe you can try again, with a clean slate, it could be faster than trying to figure out what you messed up before. Since there are many similar challenges on this site, I think you could just continue and do them. That way, you could see your progress too!

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