Product card with CSS and Flex

Community feedback

• 

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

  ---

  • You already using Flexbox for layout, but you didn't utilized it's full potential. Just add the following rules to properly center the component.

  ---

  body {
      align-items: center;
      justify-content: center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  .card-table {
    margin: auto;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  COMPONENT MEASUREMENTS 📐:

  • The width: 100% property for .card-table element is not necessary. because div is a block level element which will take the full width of the page by default.

  ---

  • So feel free to remove width: 100% style rule from .card-table element

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0
• 

  Furk•600

  @doganfurkanPosted over 1 year ago

  Wow, have you really "just" started learning web development? This is pretty darn good for a starter. Just a couple of things here:

  • You see, in the design the word "Perfume" is written in uppercase. For places like that, where you want to show text in uppercase no matter the HTML, you can use text-transform: uppercase in your CSS.
  • Your card has a width of 600px, and it doesn't shrink, at all. Because of that, I think you should set your breakpoint for the mobile view as 600px in your media query. Right now, someone with a screen width of 500px would suffer to view the whole card. You can just switch to mobile view under 600px.
  • I don't know if you noticed, but you have a little gap under the image in mobile view. That is the default behavior of the <img/> tag. You can add vertical-align: bottom to your CSS to get rid of that irritating gap.

  Apart from all that, it is mind-boggling that you just achieved this as a beginner. Huge Respect!

  Marked as helpful

  0

  ---

  

  Musstah•40

  @MusstahPosted over 1 year ago

  @doganfurkan Well my current job is Industrial Automation Engineer, I had created few HMI panels so, let's say I have experience related to UI/UX in some ways but these two things actually differ a lot. Im starting with WEB delepoment, haven't touched JS yet.

  Thanks for the nice respond :)

  0