[Arreglar] los errores de posicionamiento de los posts en las diferentes vistas
This commit is contained in:
parent
3c823f15f6
commit
b7521e6faa
7 changed files with 20 additions and 12 deletions
|
@ -15,11 +15,6 @@
|
||||||
* junto con este programa. De lo contrario, consulte <https://www.gnu.org/licenses/>.
|
* junto con este programa. De lo contrario, consulte <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.articles__cards > .card {
|
|
||||||
width: 330px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Estilos para el CTA desktop */
|
/* Estilos para el CTA desktop */
|
||||||
|
|
||||||
.CTA {
|
.CTA {
|
||||||
|
|
|
@ -72,7 +72,7 @@
|
||||||
|
|
||||||
.articles__cards {
|
.articles__cards {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill,minmax(288px, 1fr));
|
grid-template-columns: repeat(auto-fit,minmax(288px, 1fr));
|
||||||
gap: 30px 10px;
|
gap: 30px 10px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
|
@ -81,7 +81,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.articles__cards > .card {
|
.articles__cards > .card {
|
||||||
width: 300px;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Texto del CTA */
|
/* Texto del CTA */
|
||||||
|
|
|
@ -60,6 +60,10 @@ body {
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.articles__icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Estilos para mantener la altura en todos lso articulos */
|
/* Estilos para mantener la altura en todos lso articulos */
|
||||||
.articles__cards > .card {
|
.articles__cards > .card {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
@ -82,8 +82,13 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Estilos para la seccion de articulos mas recientes */
|
/* Estilos para la seccion de articulos mas recientes */
|
||||||
|
.recent-posts__title {
|
||||||
|
font-size: 2.8rem;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
.recent-cards__container > .card {
|
.recent-cards__container > .card {
|
||||||
width: 330px;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Estilos para el CTA */
|
/* Estilos para el CTA */
|
||||||
|
|
|
@ -54,8 +54,12 @@
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.recent-posts__title {
|
||||||
|
font-size: 2.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
.recent-cards__container {
|
.recent-cards__container {
|
||||||
grid-template-columns: repeat(auto-fill,minmax(288px, 1fr));
|
grid-template-columns: repeat(auto-fit,minmax(288px, 1fr));
|
||||||
gap: 30px 10px;
|
gap: 30px 10px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
|
@ -86,7 +86,7 @@ header {
|
||||||
.public-cards__container {
|
.public-cards__container {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill,minmax(288px, 1fr));
|
grid-template-columns: repeat(auto-fit,minmax(288px, 1fr));
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
|
@ -95,5 +95,5 @@ header {
|
||||||
|
|
||||||
.public-cards__container .card {
|
.public-cards__container .card {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 330px;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -64,7 +64,7 @@
|
||||||
<section class="articles">
|
<section class="articles">
|
||||||
<div class="articles__data">
|
<div class="articles__data">
|
||||||
<h1 class = "articles__title">Muro</h1>
|
<h1 class = "articles__title">Muro</h1>
|
||||||
<span class="articles__icon">❯</span>
|
<span class="articles__icon">❯</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="articles__cards">
|
<div class="articles__cards">
|
||||||
<?php require 'views/components/articles.php' ?>
|
<?php require 'views/components/articles.php' ?>
|
||||||
|
|
Loading…
Reference in a new issue