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 component solution

@moon-sheep

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 worked on the code through Visual Studio Code that I would live preview through local browser. When I imported to Github pages, it didn't look the same. In particular, the top and bottom padding for my buttons shifted.

Does my CSS need to be responsive to avoid that from happening? Or is there a part of my code that's affecting it?

Any general feedback would also be very helpful. Thanks!

Community feedback

Atif Iqbal 3,200

@atif-dev

Posted

Hi moon-sheep, congrats🎉 on completing the challenge. Better take care about following points.

  • Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
  • For proper centering the container(whole card) vertically and horizontally you can use code as:
body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}
  • Remove max-height: 90%; from main selector for better display.
  • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.
  • Include a README file in your GitHub project's solution and write about your working flow, findings, new learned things, useful resources, etc.

Hope you will find this Feedback Helpful.

Marked as helpful

1

@TeekayJnr

Posted

Hello. Please how did you push only the html and css file to github?

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