CardProductResponsive

Solution retrospective
Being able to complete this new challenge, as always, makes me feel proud, but I know that it can still be done better and I can show a better result.
What challenges did you encounter, and how did you overcome them?One of the main challenges I encountered was adjusting the styles to fit the design for mobile devices. It was quite challenging, and finding a way to make it look as it should meant I had to resort to several guides to get the design I wanted.
What specific areas of your project would you like help with?I would like help accommodating and improving further the ability to create fluid pages that adapt well to devices (especially mobile devices) without losing that sophisticated and attractive design that draws attention.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @thisisharsh7
✅ Great job on fonts, color palette, and layout – looks clean and professional.
- 📱 Mobile Issue: h1 gets cut off on small screens due to fixed width.
💡 Fix: Remove or adjust
width: 15ch
in mobile, use:
h1 { width: 100%; font-size: 2.2rem; }
-
🧠 Tip: Avoid fixed widths (like ch) for text; use max-width or let it wrap naturally.
-
📌 Suggestion: Replace absolute centering with Flexbox for better responsiveness:
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
Keep it up! Solid work – just refine mobile handling and layout flexibility.
Marked as helpful - 📱 Mobile Issue: h1 gets cut off on small screens due to fixed width.
💡 Fix: Remove or adjust
- @MarziaJalili
You've nailed this, man! 🎉
🌟 A tiny little suggesteenoo?
✅ If the old price is meant to be shown as "crossed out" or "discounted from", use the <del> element.
✅ Screen readers may announce it as "deleted" or "no longer valid", helping users understand that it's an old price.
✅ Here's the updated code:
<div class="price-product">$149.99 <del class="discount">$169.99</del></div>
😎😎😎
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