buenas!
Quería consultar porque no se estaría desplazando mis tarjetas como en el video(filas de 3), pensé que a lo mejor el calculo del width sería incorrecto, porque en el video no se termina de centrar del todo la sección de recetas .
mi archivo.html:
resultado esperado:
¡Hola Augusto!
Gracias por compartir tu duda. Parece que estás teniendo problemas para desplazar tus tarjetas en tu archivo HTML. Según el contexto que compartiste, parece que estás trabajando en la estilización de las tarjetas de recetas.
Una posible razón por la que tus tarjetas no se están desplazando como en el video es el cálculo del ancho (width) en tu archivo CSS. En el video, se utiliza la función "calc" para calcular el ancho de las tarjetas y se resta el espacio que deseas entre ellas.
Aquí tienes un ejemplo de cómo podrías aplicar esto en tu archivo CSS:
.receta {
width: calc(25% - 5rem);
/* Resto de los estilos para tus tarjetas */
}
En este ejemplo, el ancho de cada tarjeta se calcula como el 25% del contenedor menos 5rem de espacio entre ellas. Puedes ajustar estos valores según tus necesidades.
Recuerda que también es importante asegurarte de que tus tarjetas estén dentro de un contenedor con display: flex y flex-direction: row para que se muestren en filas.
Espero que esta solución te ayude a resolver tu problema. Si tienes alguna otra pregunta, ¡no dudes en preguntar! ¡Buena suerte con tu proyecto de estilización de recetas!
Espero haber ayudado y ¡buenos estudios!
Cómo va Rafaela?
Tenía el código tal cual mencionas, pero me parece que el problema esta siendo otro, repase todos los videos nuevamente pero no encuentro el error, si me podes dar una mano con esto, estaría agradecido, adjunto mis archivos HTML y CSS:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruta & Fruto</title>
<link href="https://fonts.googleapis.com/css?family=Pacifico|Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="./assets/css/normalize.css" rel="stylesheet" />
<link href="./assets/css/reset.css" rel="stylesheet" />
<link rel="stylesheet" href="./assets/css/cabecera.css">
<link rel="stylesheet" href="./assets/css/menu/menu-lista.css">
<link rel="stylesheet" href="./assets/css/menu/menu-item.css">
<link rel="stylesheet" href="./assets/css/menu/menu-link.css">
<link rel="stylesheet" href="./assets/css/banner/banner.css">
<link rel="stylesheet" href="./assets/css/banner/baner-imagen.css">
<link rel="stylesheet" href="./assets/css/banner/banner-titulo.css">
<link rel="stylesheet" href="./assets/css/sobre/sobre.css">
<link rel="stylesheet" href="./assets/css/sobre/sobre-titulo.css">
<link rel="stylesheet" href="./assets/css/sobre/sobre-descripcion.css">
<link rel="stylesheet" href="./assets/css/recetas.css">
<link rel="stylesheet" href="./assets/css/receta/receta-boton.css">
<link rel="stylesheet" href="./assets/css/receta/receta-contenido.css">
<link rel="stylesheet" href="./assets/css/receta/receta-descripcion.css">
<link rel="stylesheet" href="./assets/css/receta/receta-imagen.css">
<link rel="stylesheet" href="./assets/css/receta/receta-titulo.css">
<link rel="stylesheet" href="./assets/css/receta/receta.css">
</head>
<body>
<header class="cabecera">
<img class="logo" src="./assets/img/logo.jpg" alt="frutayfruto">
<nav class="menu">
<ul class="menu__lista">
<li class="menu__item"><a class="menu__link--activo" href="">Inicio</a></li>
<li class="menu__item"><a class="menu__link" href="">Recetas</a></li>
<li class="menu__item"><a class="menu__link" href="">Quienes Somos</a></li>
<li class="menu__item"><a class="menu__link" href="">Contacto</a></li>
</ul>
</nav>
</header>
<section class="banner">
<img class="banner__imagen" src="./assets/img/banner.png" alt="banner">
<h2 class="banner__titulo">Reaproveche mejor los alimentos</h2>
</section>
<section class="sobre">
<h2 class="sobre__titulo">Recetas para economizar y ganar salud</h2>
<p class="sobre__descripcion">Nuestras recetas te ayudan a aprovechar mejor los alimentos, economizar, ganar tiempo
y practicidad</p>
</section>
<!-- Aula 3 -->
<section class="recetas">
<div class="receta">
<img class="receta__imagen" alt="bol de aguacate" src="./assets/img/recetas/ensalada-de-frutas.jpg" />
<div class="receta__contenido">
<h4 class="receta__titulo">bol de aguacate</h4>
<p class="receta__descripcion">Receta refrescante llena de vitaminas para tu desayuno.</p>
<button class="receta__boton">Ver receta</button>
</div>
</div>
<div class="receta">
<img class="receta__imagen" alt="Ensalada de kiwi" src="./assets/img/recetas/ensalada-de-kiwi.jpg" />
<div class="receta__contenido">
<h4 class="receta__titulo">Ensalada de kiwi</h4>
<p class="receta__descripcion">Receta refrescante llena de vitaminas para tu desayuno.</p>
<button class="receta__boton">Ver receta</button>
</div>
</div>
<div class="receta">
<img class="receta__imagen" alt="Mix de vegetales" src="./assets/img/recetas/mix-de-vegetales.jpg" />
<div class="receta__contenido">
<h4 class="receta__titulo">Mix de vegetales</h4>
<p class="receta__descripcion">Receta refrescante llena de vitaminas para tu desayuno.</p>
<button class="receta__boton">Ver receta</button>
</div>
</div>
<div class="receta">
<img class="receta__imagen" alt="Pimentones en Juliana" src="./assets/img/recetas/pimentones-juliana.jpg" />
<div class="receta__contenido">
<h4 class="receta__titulo">Pimentones en Juliana</h4>
<p class="receta__descripcion">Receta refrescante llena de vitaminas para tu desayuno.</p>
<button class="receta__boton">Ver receta</button>
</div>
</div>
<div class="receta">
<img class="receta__imagen" alt="Plato oriental" src="./assets/img/recetas/plato-oriental.jpg" />
<div class="receta__contenido">
<h4 class="receta__titulo">Plato oriental</h4>
<p class="receta__descripcion">Receta refrescante llena de vitaminas para tu desayuno.</p>
<button class="receta__boton">Ver receta</button>
</div>
</div>
<div class="receta">
<img class="receta__imagen" alt="Remolachas asadas" src="./assets/img/recetas/beterrabas-asadas.jpg" />
<div class="receta__contenido">
<h4 class="receta__titulo">Remolachas assadas</h4>
<p class="receta__descripcion">Receta refrescante llena de vitaminas para tu desayuno.</p>
<button class="receta__boton">Ver receta</button>
</div>
</div>
</section>
</body>
</html>
Recetas.css:
.recetas{
background: #dab997;
display: flex;
flex-wrap: wrap;
padding: 5rem 0 0 5rem;
}
Receta.css:
.receta{
background: #fdfdfd;
display: flex;
flex-direction: column;
margin-bottom: 5rem;
margin-right: 5rem;
width: calc(25% - 5rem);
}
Te envío captura de como se ve mi archivo.html actualmente:
