Submitted about 1 year ago

Componente do cartão de visualização do produto

Alisson Costa• 40

@Alissonrcosta

Preview site View code

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I had a little trouble with display:grid, but solved it, I would like suggestions on how I could improve.

Community feedback

Ayobami Ikuewumi• 850

@Ikuewumi

Posted about 1 year ago

Hi 👋. Nice solution. About your question on grid issues, here is my suggestion:

In this case, I don't think CSS Grid is the best tool for the job. Flex might be more suitable. This is because Grid shines most in extrinsic layouts(where you explicitly define where a particular element goes) and Flex is better at intrinsic layouts, where the browser just knows what to do. So in this case, the explicitness of Grid kind of gets in the way, whereas with flex the layout could be achieved in a much simpler way:

card {
	display: flex;
	flex-direction: column;
}


@media (min-width) {
	.card {
		flex-direction: row;
	}
}

Anyways, I hope this helps. Feel free to ask any questions, and keep coding👍,

Ayobami

Marked as helpful

IryDev• 1,580

@IryDev

Posted about 1 year ago

Congratulations for having accomplished this challenge 😀 I hope it was useful to you and you have learned new things or have improved your skills

I have some suggestions to improve your solution:

If you want to center vertically and horizontally in the page you can also use the properties display: flex; , align-items: center; , justify-content: center;.
The align-items: center will center your element on a vertical axis and the justify-content: center will center your element on a horizontal axis.

HTML :

<body> The content you want to center </body> CSS :

body{ display: flex; align-items: center; justify-content: center; }

Hope you'll find this helpful, after all, your solution is very well. 😁

Happy Coding !🤩

Marked as helpful

Please log in to post a comment

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