Lista ao invés de lado a lado

Oi Gustavo, como você está?

Para esse caso precisamos alterar o frontend (parte visual) da nossa aplicação através do arquivo index.html e como estamos utilizando o framework bootstrap, basta alterarmos a dimensão da classe col-lg-4 na div responsável por mostrar lado a lado as receitas.

• Vá até o arquivo index.html e localize o seguinte trecho:

{% for receita in receitas %}
     <div class="col-12 col-sm-6 col-lg-4">
     <div class="single-best-receipe-area mb-30">

• Substitua o col-lg-4 para col-lg-8 na primeira div e adicione a classe col-lg-6 na segunda div:

{% for receita in receitas %}
<div class="col-12 col-sm-6 col-lg-8">
     <div class="single-best-receipe-area mb-30 col-lg-6">

Resultado:

Caso você não tenha tanto contato com a parte frontend da aplicação (html, css, bootstrap), eu indico os seguintes cursos:

• Curso de HTML5 e CSS3 parte 1: A primeira página da Web
• Curso de HTML5 e CSS3 parte 2: Posicionamento, listas e navegação
• Curso de HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas
• Curso de HTML5 e CSS3 parte 4: Avançando no CSS
• Curso de Bootstrap: criação de uma single-page responsiva

Qualquer dúvida estou por aqui, tá bom? A gente vai conversando.

Abraços e bons estudos!