Recipe page responsive using HTML and CSS only
Design comparison
Solution retrospective
This is my solution, i know i could be use some semantic tags but i still learning how make some pages alone. Thanks for take your time to see this and i accept any advice coming from you, guys.
Community feedback
- @danielmrz-devPosted 9 months ago
Fala @tpinheiro4!
Seu projeto está excelente!
Tenho uma sugestão:
📌 Não consegui entender exatamente o motivo de você ter usado
margin: 300px
na versão desktop, mas imagino que seja por uma dessas duas razões: Centralizar o card ou limitar o crescimento dele.Seja qual for a razão, usar margens nessas proporções não é a melhor opção, pois pode prejudicar a flexibilidade do elemento e também em alguns casos a responsividade pode ficar comprometida.
Se sua intenção foi centralizar o elemento, você pode substituir a margem por isso aqui:
body { min-height: 100vh; display: flex; /* também funciona com grid */ justify-content: center; align-items: center; }
Mas se a sua intenção foi limitar o crescimento do card, você pode simplesmente adicionar um
max-width
a ele. Assim, ele continua responsivo, mas só cresce até determinado ponto, e esse ponto é o valor que você coloca emmax-width
.Espero que ajude!
Fora isso, ótimo trabalho!
Marked as helpful0 - @devid8642Posted 9 months ago
First of all, congratulations on the solution, but I have some points to consider:
Use the serif font available in the project in the appropriate titles;
Use the CSS ::marker pseudo-element to style list markers;
Change the color of the texts at the beginning of the page so that they look like the texts on the rest of the page;
Again congratulations on the solution.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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