Más acciones
Sin resumen de edición Etiqueta: Revertido |
Sin resumen de edición Etiqueta: Revertido |
||
Línea 8: | Línea 8: | ||
} | } | ||
/* | /* Contenedor de cuadrícula para escritorio */ | ||
.square-container { | .square-container { | ||
display: | display: grid; | ||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |||
gap: 20px; | |||
margin- | margin: 0 auto; | ||
max-width: 1200px; /* Limitar el ancho total */ | |||
padding: 20px; | |||
} | } | ||
/* Estilo individual de los cuadrados (escritorio) */ | |||
.square { | .square { | ||
width: 100%; | width: 100%; | ||
Línea 26: | Línea 29: | ||
border-radius: 8px; | border-radius: 8px; | ||
transition: transform 0.2s; | transition: transform 0.2s; | ||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | } | ||
Línea 57: | Línea 63: | ||
.mobile-only { | .mobile-only { | ||
display: block; | display: block; | ||
} | |||
.square-container { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 10px; | |||
padding: 10px; | |||
} | } | ||
} | } |
Revisión del 01:17 9 abr 2025
/* Mostrar solo en escritorio */
.nomobile {
display: block;
}
.mobile-only {
display: none;
}
/* Contenedor de cuadrícula para escritorio */
.square-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin: 0 auto;
max-width: 1200px; /* Limitar el ancho total */
padding: 20px;
}
/* Estilo individual de los cuadrados (escritorio) */
.square {
width: 100%;
aspect-ratio: 1 / 1;
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
text-align: center;
border-radius: 8px;
transition: transform 0.2s;
display: flex;
justify-content: center;
align-items: center;
}
.square:hover {
transform: scale(1.03);
}
/* Cuadrados en móviles */
.square-mobile-container {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.square-mobile {
width: 100%;
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
text-align: center;
border-radius: 8px;
}
/* Responsive para móviles */
@media only screen and (max-width: 768px) {
.nomobile {
display: none;
}
.mobile-only {
display: block;
}
.square-container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
}
}