Design comparison
Solution retrospective
This is my solution for the Single Price Grid Component.
- With this challenge I got to practice more responsive design but still feel unsure about it and that I still have a lot of room for improvement.
- In terms of layout implementation, that is something I really enjoy and feel like my skills are being put to good use.
- O̶n̶e̶ t̶h̶i̶n̶g̶ t̶h̶a̶t̶ b̶o̶t̶h̶e̶r̶e̶d̶ m̶e̶ w̶a̶s̶ t̶h̶e̶ f̶a̶c̶t̶ t̶h̶a̶t̶ t̶h̶e̶ f̶o̶o̶t̶e̶r̶ d̶i̶d̶n̶'t̶ r̶e̶m̶a̶i̶n̶ c̶e̶n̶t̶e̶r̶e̶d̶ w̶i̶t̶h̶ t̶h̶e̶ p̶a̶g̶e̶ l̶i̶k̶e̶ o̶t̶h̶e̶r̶ p̶r̶o̶j̶e̶c̶t̶s̶ I̶ h̶a̶v̶e̶ i̶m̶p̶l̶e̶m̶e̶n̶t̶e̶d̶. I̶ t̶r̶i̶e̶d̶ t̶o̶ f̶i̶x̶ t̶h̶i̶s̶ b̶u̶t̶ u̶n̶s̶u̶c̶c̶e̶s̶s̶f̶u̶l̶l̶y̶. I̶ w̶o̶u̶l̶d̶ r̶e̶a̶l̶l̶y̶ a̶p̶p̶r̶e̶c̶i̶a̶t̶e̶ i̶t̶ i̶f̶ a̶n̶y̶o̶n̶e̶ l̶o̶o̶k̶e̶d̶ a̶t̶/t̶e̶s̶t̶e̶d̶ m̶y̶ c̶o̶d̶e̶ a̶n̶d̶ c̶o̶u̶l̶d̶ h̶e̶l̶p̶ m̶e̶ f̶i̶x̶ t̶h̶i̶s̶ m̶i̶n̶o̶r̶ i̶s̶s̶u̶e̶. [FIXED]
I'm happy to hear any feedback and advice to help me improve!
Community feedback
- @peanutbutterjllyPosted over 1 year ago
hey 👋,
I would change the display on the body to grid (and you can then remove flex-direction, and position: relative), and add
grid-template-rows: 1fr auto;
that'll make your content take up the majority of the page and the footer (which is set to 'auto') will only take up its size as a row.also, in the paragraph of your footer, you can remove the
position: fixed;
andbottom: 0;
from your .attribution class.those small details will get your footer on the right track.
your solution looks great overall 👍
Marked as helpful0@sophie-mc-devPosted over 1 year agoThank you @peanutbutterjlly, that was exactly what I needed! I appreciate the prompt and informative response! have a nice day :)
1
Please log in to post a comment
Log in with GitHubJoin 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