#fix: corregir solapamiento de imagen en tarjetas del catálogo
- Cambiar height: 100% por aspect-ratio: 1 en .product-image-container - Eliminar media queries duplicados y obsoletos - El contenedor ahora se ajusta al tamaño real del v-img
This commit is contained in:
@@ -176,7 +176,6 @@ export default {
|
|||||||
.product-image-container {
|
.product-image-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
|
background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
@@ -336,143 +335,6 @@ export default {
|
|||||||
|
|
||||||
/* Móvil estándar (375px - 559px) */
|
/* Móvil estándar (375px - 559px) */
|
||||||
@media (min-width: 375px) and (max-width: 559px) {
|
@media (min-width: 375px) and (max-width: 559px) {
|
||||||
.product-name {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-value {
|
|
||||||
font-size: 1.05rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tablet (560px - 959px) */
|
|
||||||
@media (min-width: 560px) and (max-width: 959px) {
|
|
||||||
.product-content {
|
|
||||||
padding: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-name {
|
|
||||||
font-size: 1rem;
|
|
||||||
min-height: 2.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-label {
|
|
||||||
font-size: 0.68rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-value {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-total-chip {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
height: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quantity-input {
|
|
||||||
max-width: 70px;
|
|
||||||
min-width: 70px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Desktop (≥ 960px) */
|
|
||||||
@media (min-width: 960px) {
|
|
||||||
.product-content {
|
|
||||||
padding: 16px 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-name {
|
|
||||||
font-size: 1.05rem;
|
|
||||||
min-height: 2.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-label {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-value {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-total-chip {
|
|
||||||
font-size: 1rem;
|
|
||||||
height: 30px;
|
|
||||||
padding: 0 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-actions {
|
|
||||||
padding: 8px;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quantity-input {
|
|
||||||
max-width: 70px;
|
|
||||||
min-width: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qty-btn {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Desktop Large (≥ 1280px) */
|
|
||||||
@media (min-width: 1280px) {
|
|
||||||
.product-content {
|
|
||||||
padding: 18px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-name {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
min-height: 2.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-value {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-total-chip {
|
|
||||||
font-size: 1.05rem;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Desktop Extra Large (≥ 1920px) */
|
|
||||||
@media (min-width: 1920px) {
|
|
||||||
.product-name {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
min-height: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-value {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-content {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-name {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
min-height: 1.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-value {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quantity-input {
|
|
||||||
max-width: 50px;
|
|
||||||
min-width: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Móvil estándar (375px - 559px) */
|
|
||||||
@media (min-width: 375px) and (max-width: 559px) {
|
|
||||||
.product-image-container {
|
|
||||||
height: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-name {
|
.product-name {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
}
|
}
|
||||||
@@ -484,10 +346,6 @@ export default {
|
|||||||
|
|
||||||
/* Tablet (560px - 959px) */
|
/* Tablet (560px - 959px) */
|
||||||
@media (min-width: 560px) and (max-width: 959px) {
|
@media (min-width: 560px) and (max-width: 959px) {
|
||||||
.product-image-container {
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-content {
|
.product-content {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
@@ -518,10 +376,6 @@ export default {
|
|||||||
|
|
||||||
/* Desktop (≥ 960px) */
|
/* Desktop (≥ 960px) */
|
||||||
@media (min-width: 960px) {
|
@media (min-width: 960px) {
|
||||||
.product-image-container {
|
|
||||||
height: 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-content {
|
.product-content {
|
||||||
padding: 12px 10px;
|
padding: 12px 10px;
|
||||||
}
|
}
|
||||||
@@ -563,10 +417,6 @@ export default {
|
|||||||
|
|
||||||
/* Desktop Large (≥ 1280px) */
|
/* Desktop Large (≥ 1280px) */
|
||||||
@media (min-width: 1280px) {
|
@media (min-width: 1280px) {
|
||||||
.product-image-container {
|
|
||||||
height: 170px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-content {
|
.product-content {
|
||||||
padding: 14px 12px;
|
padding: 14px 12px;
|
||||||
}
|
}
|
||||||
@@ -588,10 +438,6 @@ export default {
|
|||||||
|
|
||||||
/* Desktop Extra Large (≥ 1920px) */
|
/* Desktop Extra Large (≥ 1920px) */
|
||||||
@media (min-width: 1920px) {
|
@media (min-width: 1920px) {
|
||||||
.product-image-container {
|
|
||||||
height: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-name {
|
.product-name {
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
min-height: 2.5rem;
|
min-height: 2.5rem;
|
||||||
|
|||||||
Reference in New Issue
Block a user