Product preview card component - not responsive

Solution retrospective
i need a lot of practice, give me advices , and how i can improves my self , thank you so much ;-)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @bccpadge
Hello @ouariadam. Welcome to Frontend Mentor Community !!!🎉
I have few tips to improve your solution.
HTML 📃:
- Wrap your content using
main
tag because every website should have at least one landmark
<body> <main></main> <footer></footer> </body>
CSS 🎨:
- Font size shouldn't be pixels because it is inaccessible for users who want to change the font size in their browser setting.
More info📚:
Font size shouldn't be in pixels
- I see your product preview card component is not centered in the page.
- You can use Flexbox or CSS Grid
Flexbox
body{ display:flex; justify-content:center; align-items:center; min-height:100vh; }
CSS Grid
body{ display:grid; place-content:center; min-height:100vh }
- To make this component responsive you would need to add media query
- If you haven't learned responsive design the best project to start on Frontend Mentor is the qr code component challenge.
Hope this helps you and don't hesitate to reach out to me if you have any questions
- Wrap your content using
- P@JIH7
Looks good on desktop! I did notice the layout isn't currently responsive so it doesn't look right on mobile. If you're not familiar with media queries, I suggest checking them out.
Making sure your site looks good on mobile is really important since that's the way most people engage with the web.
Also if you add a hover effect on the button it will go a long way towards making things feel nice. Here's an easy way to do that in your CSS.
.buy:hover{ background-color: hsl(158, 42%, 18%); }
- @BinLama
Looks pretty good but try to add
cursor: pointer;
on button so that it looks like a pointer. If you want to use button tag instead of div tag for the buy button, then you can make a button and use pseudo elements to add the cart. Look at Kevin Powell's video to learn more about it.
Also you have some random ", ." on your html so you can remove that. But overall, looks really nice!!
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