Recipe page responsive using HTML and CSS only

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 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 em max-width.

  Espero que ajude!

  Fora isso, ótimo trabalho!

  Marked as helpful

  0
• 

  Dêvid Teófilo•240

  @devid8642Posted 10 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 helpful

  0