CSS general responsiveness to let the site to display on system,moblie
Design comparison
Solution retrospective
For this QR Code Component project, I'm most proud of successfully implementing a clean, responsive design that closely matches the Frontend Mentor challenge. The use of semantic HTML, CSS Flexbox for centering, and a mobile-first approach helped create a visually appealing and accessible component.
What I'd Do Differently Next Time: Improve Accessibility – I would focus more on making the project fully accessible by adding aria-labels and ensuring better contrast ratios. Enhance Responsiveness – While the design works well on mobile, I could refine it further for larger screens by experimenting with CSS Grid or adding a max-width constraint. Use CSS Variables – Instead of hardcoding colors, using CSS variables would improve maintainability and allow easy theme customization. Would love feedback on how I could further optimize the structure or styling! 🚀
What challenges did you encounter, and how did you overcome them?Challenges & How I Overcame Them Centering the Component Properly
Challenge: Getting the QR code card perfectly centered on the page was tricky, especially for different screen sizes. Solution: I used display: flex; justify-content: center; align-items: center; min-height: 100vh; on the body, ensuring proper alignment on all devices. Image Not Displaying
Challenge: Initially, the QR code image did not load, likely due to an incorrect file path. Solution: I checked the directory structure and ensured the correct relative path (./images/image-qr-code.png). Font Not Rendering as Expected
Challenge: The text did not match the design at first because the Outfit font wasn't applied properly. Solution: I added the correct Google Fonts import in the <head> and verified its correct usage in CSS. Making the Card Fully Responsive
Challenge: The card looked good on mobile but had too much empty space on wider screens. Solution: I set a max-width on the card, adjusted padding, and tested different screen sizes using Chrome DevTools. Each challenge was an opportunity to learn and refine my problem-solving skills. If anyone has suggestions for further improvements, I'd love to hear them! 🚀
What specific areas of your project would you like help with?Challenges & How I Overcame Them
- Centering the Component Properly Challenge: Getting the QR code card perfectly centered on the page was tricky, especially for different screen sizes. Solution: I used the following CSS on the <body> to ensure proper alignment on all devices:
css Copy Edit body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } 2. Image Not Displaying Challenge: Initially, the QR code image did not load, likely due to an incorrect file path. Solution: I checked the directory structure and ensured the correct relative path:
html Copy Edit <img src="./images/image-qr-code.png" alt="QR Code"> 3. Font Not Rendering as Expected Challenge: The text did not match the design at first because the Outfit font wasn't applied properly. Solution: I added the correct Google Fonts import in the <head> and verified its usage in CSS:
html Copy Edit
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet"> css Copy Edit body { font-family: 'Outfit', sans-serif; } 4. Making the Card Fully Responsive Challenge: The card looked good on mobile but had too much empty space on wider screens. Solution: I set a max-width on the card, adjusted padding, and tested different screen sizes using Chrome DevTools.Each challenge was an opportunity to learn and refine my problem-solving skills. If anyone has suggestions for further improvements, I'd love to hear them! 🚀
Let me know if you’d like any additional refinements! 😊
Community feedback
- @DangelobastPosted about 2 months ago
Keep it up, I noticed your footer or attribution is next to your QR code, it's easily fixable with FlexBox. Just enclose all the elements inside your body with another div element and add a class to it "QR-container" or something like that to style it, then in your CSS apply display:flex; to start using it and flex-direction: column; which will make your content or children of QR-Container be displayed vertically, Since you already have 2 children "card" and "attribution" those will be correctly positioned vertically.
Think of it like two boxes your QR-Code is your first box and your attribution is your second box since they are children of the new div you will create with the class QR-Container setting it to flex-direction column will set the box under the other. Also, you can add some margin between them but that's not the ideal way, just use some gap:4px; for example and it will create a gap between those 2 boxes, in this case, card and attribution.
There are other ways but given your structure, this should work
0 - @4ndradeGabrielPosted about 2 months ago
Is almost there. Keep up the great work!
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