Submitted about 1 year ago

Product preview card component - not responsive

ouariadam• 60

@ouariadam

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

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,760

@bccpadge

Posted 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

ouariadam• 60

@ouariadam

Posted about 1 year ago

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

Jeremy Helsel• 670

@JIH7

Posted 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%);
}

ouariadam• 60

@ouariadam

Posted 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 -(●'◡'●)

Bin• 80

@BinLama

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

ouariadam• 60

@ouariadam

Posted 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 -🍀,

Please log in to post a comment

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