Recipe page

What are you most proud of, and what would you do differently next time?

I've learnt to better plan and organise my code. I'm proud that I can easily find info especially about spacing and sizes of the divs in Figma file.

What challenges did you encounter, and how did you overcome them?

Biggest challenge was the mobile version, especially spacing ordered list. There was a lot of media queries on the mobile, but that's the cost of the desktop-first approach, which I prefer.

Mobile version media queries:

@media (max-width: 375px) {
	.container {
		max-width: 100%;
		margin: 0;
	}
	.card {
		margin-block: 0;
		border-radius: 0;
		padding: 0;
		gap: 0;
	}

	.top-image {
		height: 17.1rem;
		border-radius: 0;
	}

	.text-content {
		padding: 4rem 3.2rem;
	}

	h1 {
		font-size: 3.6rem;
	}

	.attribution {
		margin-top: 4rem;
	}

	.instructions ol {
		gap: 0.8rem;
	}

	.instructions span {
		padding-left: 1.6rem;
	}

	ol {
		list-style-position: outside;
		margin-left: 1rem;
	}

	li {
		padding-left: 2.4rem;
	}
}

What specific areas of your project would you like help with?

I'm not sure margin-left: 1rem; on the mobile ol is correct, when I use list-style-position: outside; but it works.