@correlucas
Posted
Hello Vikram Ingleshwar! Congratulations for your new solution!
Your solution seems great. You've done a good job with the GRID and the media queries. There's only two minor details your can adjust to have your solution more accurate in comparison to the design files (starter files).
-
Note that you've insert the background inside you element with the class .grid-container, its better you insert the
background-color<body>to display it filling all the screen. Apply to the bodyheight: 100vhto make sure your background will fill all the screen. -
Align your main component applying flex to the body with these properties
display: flex; align-items: center; justify-content: center;
See the changes I've done to your code below:
body { display: flex; align-items: center; justify-content: center; height: 100vh; background: var(--clr-primary-cream); }
I hope these tips help you Vikram, then you can say me if these changes fixed the background/position behavior. Happy coding.
Marked as helpful
@vikramvi
Posted
@correlucas Hi Lucas,
Thanks a ton for your valuable time and comments.
I've done the fixes ( https://github.com/vikramvi/Product-preview-card-component/commit/4b849dbe9ace1da24c72475c39b59ab5a203325d )
Kind Regards, Vikram
@correlucas
Posted
@vikramvi Hello Vikram, thats nice! I just saw your solution and seems to works good! An additional advice is to add some margin in your component to avoid the card touching the screen limits in smaller screens. But anyway now seems much better, congrats.
.grid-container { margin: 20px; }
Happy coding!
@vikramvi
Posted
@correlucas I've pinged you on slack, please check
@vikramvi
Posted
@correlucas Thanks again for review, do you think instead of adding margin will below work better ?
width: 90%
