#fff

learnprogramming

g/learnprogramming

ago

public

earned

reactions

r0.1 0;
0 1re00 fo0;
01/01000 0.8rem color: #444 ;
font-size: 1rem;
}

/* Price */
.product-price {
color: #7b4f29 ;
font-size: 1.2rem;
margin: 0.5rem 1rem 0;
font-weight: 500;
}

/* Size selector and button */
.product-detail-controls {
display: flex;
align-items: center;
gap: 0.7rem;
margin-top: 1rem;
justify-content: center;
}

.add-to-cart-btn {
background: #7b4f29 ;
color: #fff ;
border: none;
border-radius: 8px;
padding: 0.6rem .5rem;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s;
}

.add-to-cart-btn:hover {
background: #5a371a ;
}

.product-card {
width: 100%;
aspect-ratio: 1 / 1;
background: #fff ;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
overflow: hidden;
position: relative;
}

.product-card img {
width: 100%;
height: 70%;
object-fit: contain;
background: #fff ;
display: block;
}

.product-card .product-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem 0.5rem .5rem 0.5rem;
background: rgba(255,255,255,0.95);
text-align: center;
z-index: 2;
}
.products-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
background: #f4f4f4 ;
padding: 2rem;
box-sizing: border-box;
justify-items: center;
width: 100vw;
min-height: 100vh;
}

.product-item {
background: #fff8f0 ;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
padding: 1rem;
max-width: 220px;
}

.product-image {
width: 100%;
border-radius: 8px;
object-fit: cover;
}

.product-image-small {
width: 70%;
height: 70%;
}

/* Center the detail card on the page */
.product-detail-outer {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #111 ;* matches your site background */
}

/* The card itself */
.product-detail-container {
background: #f8f6f3 ;
border-radius: 18px;
box-shadow: 0 4px 24px rgba(0,0,0,0.10);
max-width: 380px;
width: 100%;
padding: 2rem 1.5rem .5rem 1.5rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

/* Product image */
.product-detail-image {
width: 90%;
max-width: 320px;
height: 220px;
object-fit: contain;
border-radius: 12px;
margin-bottom: 1.5rem;
background: #fff ;
box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

/* Product name */
.product-detail-container h2 {
margin: 0.5rent-size: 1.3rem;
font-weight: 600;
color: #222 ;
}

/* Description */
.product-detail-container p {
margin: 0.2rem 0.8rem ;
color: #444 ;
font-size: 1rem;
}

/* Price */
.product-price {
color: #7b4f29 ;
font-size: 1.2rem;
argi font-weight: 500;
}

/* Size selector and button */
.product-detail-controls {
display: flex;
align-items: center;
gap: 0.7rem;
margin-top: 1rem;
justify-content: center;
}

.add-to-cart-btn {
background: #7b4f29 ;
color: #fff ;
border: none;
border-radius: 8px;
padding: 0.6rem .5rem;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s;
}

.add-to-cart-btn:hover {
background: #5a371a ;
}

.product-card {
width: 100%;
aspect-ratio: 1 / 1;
background: #fff ;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
overflow: hidden;
position: relative;
}

.product-card img {
width: 100%;
height: 70%;
object-fit: contain;
background: #fff ;
display: block;
}

.product-card .product-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem 0.5reem 0.5rem;
background: rgba(255,255,255,0.95);
text-align: center;
z-index: 2;
}

Products.jsx:

import React from 'react';
import { Link } from 'react-router-dom';
import Heels from '../assets/images/Heels.jpg';
import HEELS from '../assets/images/HEELS.png';
import SapatoCastanho from '../assets/images/Sapato castanho.png';
import ShoesJpg from '../assets/images/shoes.jpg';
import ShoesWebp from '../assets/images/shoes.webp';
import Yasmina from '../assets/images/YASMINA.jpg';

const productImages = [
{
id: '1',
src: Heels,
alt: 'Heels',
description: 'Elegant high heels for formal occasions.',
price: '€120'
},
{
id: '2',
src: HEELS,
alt: 'HEELS',
description: 'Classic black heels for every event.',
price: '€110'
},
{
id: '3',
src: SapatoCastanho,
alt: 'Sapato Castanho',
description: 'Brown loafers for a timeless look.',
price: '€130'
},
{
id: '4',
src: ShoesJpg,
alt: 'Shoes',
description: 'Versatile shoes for any occasion.',
price: '€100'
},
{
id: '5',
src: ShoesWebp,
alt: 'Shoes WebP',
description: 'Modern shoes with a unique finish.',
price: '€105'
},
{
id: '6',
src: Yasmina,
alt: 'Yasmina',
description: 'Chic heels for special nights.',
price: '€140'
},
];

const Products = () => (
<div className="products-gallery">
{productImages.map(product => (
<div className="product-card" key={product.id}>
<img src={product.src} alt={product.alt} />
<div className="product-info">
<strong>{product.alt}</strong>
<div>{product.price}</div>
</div>
</div>
))}
</div>
);

export default Products;
import React from 'react';
import { Link } from 'react-router-dom';
import Heels from '../assets/images/Heels.jpg';
import HEELS from '../assets/images/HEELS.png';
import SapatoCastanho from '../assets/images/Sapato castanho.png';
import ShoesJpg from '../assets/images/shoes.jpg';
import ShoesWebp from '../assets/images/shoes.webp';
import Yasmina from '../assets/images/YASMINA.jpg';

const productImages = [
{
id: '1',
src: Heels,
alt: 'Heels',
description: 'Elegant high heels for formal occasions.',
price: '€120'
},
{
id: '2',
src: HEELS,
alt: 'HEELS',
description: 'Classic black heels for every event.',
price: '€110'
},
{
id: '3',
src: SapatoCastanho,
alt: 'Sapato Castanho',
description: 'Brown loafers for a timeless look.',
price: '€130'
},
{
id: '4',
src: ShoesJpg,
alt: 'Shoes',
description: 'Versatile shoes for any occasion.',
price: '€100'
},
{
id: '5',
src: ShoesWebp,
alt: 'Shoes WebP',
description: 'Modern shoes with a unique finish.',
price: '€105'
},
{
id: '6',
src: Yasmina,
alt: 'Yasmina',
description: 'Chic heels for special nights.',
price: '€140'
},
];

const Products = () => (
<div className="products-gallery">
{productImages.map(product => (
<div className="product-card" key={product.id}>
<img src={product.src} alt={product.alt} />
<div className="product-info">
<strong>{product.alt}</strong>
<div>{product.price}</div>
</div>
</div>
))}
</div>
);

export default Products;
#dev #programming #technology 5m n: 0.m 5rem m m 0.2r em 00 1/*Problem formating website

Hey guys, I'm still new to JSX and CSS and I'm having this issue with my products page,the images are overlapping eachother tis all very disorganized and some photos are huge compared to the others, I tried tweaking a few lines of code to see if it will fix the problem but it hasn't worked.

I'm going to paste the respective codes, appreciate all the help!

Products.css:

.products-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
background: #f4f4f4 ;
padding: 2rem;
box-sizing: border-box;
justify-items: center;
width: 100vw;
min-height: 100vh;
}

.product-item {
background: #fff8f0 ;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
padding: 1rem;
max-width: 220px;
}

.product-image {
width: 100%;
border-radius: 8px;
object-fit: cover;
}

.product-image-small {
width: 70%;
height: 70%;
}

/* Center the detail card on the page */
.product-detail-outer {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #111 matches your site background */
}

/* The card itself */
.product-detail-container {
background: #f8f6f3 ;
border-radius: 18px;
box-shadow: 0 4px 24px rgba(0,0,0,0.10);
max-width: 380px;
width: 100%;
padding: 2rem 1.5rem .5rem 1.5rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

/* Product image */
.product-detail-image {
width: 90%;
max-width: 320px;
height: 220px;
object-fit: contain;
border-radius: 12px;
margin-bottom: 1.5rem;
background: #fff ;
box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

/* Product name */
.product-detail-container h2 {
margin: 0.5rem 0.2rem ;
font-size: 1.3rem;
font-weight: 600;
color: #222 ;

/* Description */
.product-detail-container p {
margi;
n: 0.2rem }
;
source