Design comparison
Solution retrospective
Feel free to leave feedback. I opted out of doing the mobile view for now as I can clearly see the difference in my outcome vs the solution.
I am just over a month into my coding journey and have touched on the basics of HTML, CSS and JS through Code Cademy.
Although it is good knowledge I feel the text only learning leaves you often struggling to remember what you've learnt so I am trying my hand at some off-platform exercises like this to learn from other coders.
Feel free to rip everything apart and give tips.
thanks
Community feedback
- @HassiaiPosted almost 2 years ago
Replace <section class="container"> with the main tag to fix the accessibility issue.
To center .container on the page using flexbox, add min-height:100vh to the body.
There is no need to give .container a max-height value, there is no need for a max-height. There is no needt to style .card-fig, there is no need to give the img a max-height value.
Give the article a padding value for all the sides and give p a margin-top value or h1 a margin-bottom value for the space between the text. Increase the max-width of .container for it to be equivalent to the width of the design.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful1@Stephen-Gray99Posted almost 2 years ago@Hassiai Thank you for your feedback. I have updated the code and the live site should show this. If you would like to check it and get back to me with any further feedback it would be appreciated! thank you!
On the live site it shows as it is too large IMO. However, when I open the local path from VS code it is perfect!
0
Please log in to post a comment
Log in with GitHub
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