Skip to content
Submitted about 1 year ago

Product preview card component - not responsive

ouariadam•60
@ouariadam
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

i need a lot of practice, give me advices , and how i can improves my self , thank you so much ;-)

Community feedback

  • Rebecca Padgett•1,840
    @bccpadgePosted about 1 year ago

    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

    3
    ouariadam•60
    @ouariadamPosted about 1 year ago

    thank sooooo much , i appreciat your comment , i'll do my best--🍀@bccpadge

    0
  • Jeremy Helsel•670
    @JIH7Posted about 1 year ago

    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.

    Here's an article on them

    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%);
}
    1
    ouariadam•60
    @ouariadamPosted about 1 year ago

    thank you so much jeremy , i apreciat your comment ,i'll do my best🍀@JIH7 thanks also for the article and your note , i'll try my best -(●'◡'●)

    0
  • Bin•80
    @BinLamaPosted about 1 year ago

    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!!

    1
    ouariadam•60
    @ouariadamPosted about 1 year ago

    thank you so much , i aprecciat that @BinLama , yeah i know-😂 ,There are many unessesary mistakes that you mentioned, and I will try to avoid them in the future. Thank you very much for your comment and advice, I really appreciate it -🍀,

    1

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