Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview component using CSS Grid

Srikanth 110

@AgeOfUltra

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@RibeiroPorto

Posted

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

@AgeOfUltra

Posted

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

1

Please log in to post a comment

Log in with GitHub
Discord logo

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