Product preview component using CSS Grid

Community feedback

• 

  Vinicius Porto Ribeiro•280

  @RibeiroPortoPosted almost 2 years ago

  Hello AgeOfUltra! how are you ? Your project is very good!

  Just some tips i think you may enjoy:

  • I think that you used:

  	max-height: 40vmin;
  	margin: 122px auto;
  

  to center your component. another way to do it is:

  	position: absolute;
      	top: 50%;
      	left: 50%;
      	transform: translate(-50%,-50%);
  

  • I also noticed that you use the same image for desktop and mobile. You could use:

  	<picture class="item1">
  		<source class="image" srcset="image-product-mobile.jpg" media="(max-width: 375px)">
  		<img class="image" src="image-product-desktop.jpg">
        </picture>
  

  Instead of:

  	<div class="item1">
  		<img class="image" src="image-product-desktop.jpg">
        </div>
  

  to make it more responsive.

  Anyway your project is awesome, congrats!

  I hope you enjoy this small tip, hope it helps you. Any questions please feel free to contact me!

  Marked as helpful

  0

  ---

  

  Srikanth•110

  @AgeOfUltraPosted almost 2 years ago

  @RibeiroPorto Thanks! And I will try to do better.

  1