QR Code card - first challenge

Solution retrospective
I got it done, but got a lot of help from Copilot. As I improve I want to start doing these challenges without any AI support until I really get stuck.
What challenges did you encounter, and how did you overcome them?I've been through several CSS tutorials but none of this seems to stick very well. I really need to get the most common properties into my head better, as well as getting much better at layouts using flex and grid.
What specific areas of your project would you like help with?General guidance on how to remember the basics of positioning would be much appreciated. Specifically, positioning container divs on the page, and positioning child divs and elements inside them.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @mohamed8eo
🛠️ CSS Improvement Suggestion
Hi there,
Your solution looks great overall—nice work! 🙌
However, I noticed a couple of issues in the CSS styling that could use some refinement.🔹 1. Margin Issue
You're currently using:
margin: 25p% auto;
This causes the cart to be pushed too far down the screen, and the value 25p% is not valid CSS (likely a typo). Even if corrected to 25%, relying on margin for vertical alignment can result in inconsistent positioning, especially on larger screens. Instead of using margin for vertical alignment, apply Flexbox to the body element to center the cart both vertically and horizontally:
body { height: 100svh; display: flex; justify-content: center; align-items: center; flex-direction: column; }
This approach ensures that the cart is perfectly centered within the viewport, providing a more consistent and professional layout across different screen sizes.
Marked as helpful - @andreaselmi
Hi there! Great work on your first project ☺️
Here are a few pieces of advice to help you improve:
📐 Use rem instead of px To make your website more accessible and responsive to user font-size preferences, it’s recommended to use rem units instead of fixed px values. This allows your layout and text to scale more naturally.
🌁 Don't forget alt attribute Your <img> tags is missing an alt attribute. Adding descriptive alt text improves accessibility, especially for users relying on screen readers, and helps with SEO.
💡 To improve the way you position container divs and their child elements, I suggest you take a look at https://css-tricks.com/, you can find interesting and very simple guides
Keep going! 🚀
Marked as helpful
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