Product Preview Card Component (Flexbox & Grid)

Community feedback

• 

  Hoshiko•180

  @oliwiakrammPosted over 1 year ago

  This comment was deleted 10 months ago

  0

  ---

  

  Michael Okwuosah•50

  @michaelo-oPosted over 1 year ago

  @oliwiakramm I've taken your suggestions into account, however, I have questions concerning the usage of the picture element. I tried using it and the styles of the classes imgdesktop and imgmobile were not applied anymore, causing the images to be displayed in their original size and without the border-radius property. Can you let me know how I can apply styles to the images in the source tag?

  0

  

  Hoshiko•180

  @oliwiakrammPosted over 1 year ago

  @m1chae-l

  • I won't be able to exactly tell you your solution because I don't have time to refactor your code, but some of the stuff that you can refactor in your code is add CSS reset, remove one of the 2 sources, only 1 is needed the other is an img element and this one you style, remove productcont as it's unnecessary here, this is also breaking your code main{ justify-content: center; align-items: center;} because it's aligning your elements for no reason and breaks picture, main> *{flex basis 50%} will make picture and .productinfo have exactly 50% and you need main{max-width:37.5rem} to limit the width and it will also shrink the element

  • you can check @MelvinAguilar solution or @vcarames since they both used pictureelement in their solutions and their projects are really good.

  • css reset will help you to style things by removing some of their original styles and will help you with styling images by giving them max-width:100% and display:block.

  • About border-radius there is no need to put it on your images, what you could do is put border-radius on main and write overflow:hidden so img won't overflow your main and will have a nice border-radius

  0