Design comparison
Solution retrospective
I am proud of the the fact that I could scale it down to fit the sizes
What challenges did you encounter, and how did you overcome them?I encountered the fact that my card size was too large for the design but then I managed by scaling it down
What specific areas of your project would you like help with?I would need help with centering a text within a div from all sides
Community feedback
- @ChamuMutezvaPosted 7 days ago
Hi MuftiBinHabib
I wrote some feedback the other day on your QR code challenge. It is important to read and implement the changes suggested in order to have a progressive learning that can be meaningful. If something is not clear from the suggestions , ask for further clarification. Creating new projects and repeating the same mistakes from previous challenges will prolong your learning
Marked as helpful0 - @bhuvi819381Posted 7 days ago
Hey bro i just checked your code and suggest some
README Tips
- Always keep the README.md updated—it’s like the first impression of your project!
- Take a moment to read it and make sure it makes sense.
- Once you’ve reviewed it, feel free to delete the old one.
- Rename the provided README template and tweak it to fit your project.
CSS Centering and Responsiveness
Let’s make sure your designs are flexible and look great on all devices:
- Centering Elements:
Use the following trick to center things in your container or body (horizontally and vertically):body { height: 100vh; display: flex; justify-content: center; align-items: center; }
Avoid Fixed Widths: Using fixed widths can mess up your responsiveness, especially on smaller screens. Instead: ```css .box { width: 80%; /* Flexible units are your best friend */ max-width: 1200px; /* A safe upper limit */ }
Image Accessibility: Don’t forget the alt attribute for your images! It’s great for accessibility and helps screen readers. Here’s an example:
<img src="example.jpg" alt="A description of the image">
(If the image is purely decorative, you can leave it blank—but only if you really mean it!)
Marked as helpful0 - Always keep the README.md updated—it’s like the first impression of your project!
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