Product Preview Card Component (Responsive Mobile Design)

Community feedback

• 

  Marley Semende•570

  @Marley-SemendePosted 11 months ago

  Hi @majdiachour1. Nice work, here is some feedback: Instead of giving your entire .grid container a border-radius at once, you could target the image container and text container seperately and use the border-top-right-radius property for only the top right border and border-bottom-left-radius to target the left bottom radius and the same for the other borders that needs a border-radius. As you can see that by targeting the entire grid container, it gives your inner borders a radius which is different from the original design. try this:

  .pic { border-top-left-radius: -- px; border-bottom-left-radius: -- px; } And do the same for the info selector on the right side. You will notice that this will give your design a straight border in the middle as with the original design. I hope this helps. Happy coding:)

  1
• 

  Kimo Spark•2,190

  @kimodev1990Posted 11 months ago

  You could use Clamp( ) method in CSS for responsive design to change size of your elements ( Font, img, div, etc....) according to your viewport size and different layout dimensions to fit with several devices. Other than that, nice work and keep going on.

  0