[go: up one dir, main page]
Scribd
Upload
15 views2 pages

Shop CSS 1

The document contains CSS styles specifically for a shop page, defining layout, typography, and responsive design elements. It includes styles for the shop page content, product grid, product cards, and media queries for different screen sizes. Key features include a responsive grid layout, hover effects for product cards, and adjustments for mobile devices.

Uploaded by

chickdiamond6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views2 pages

Shop CSS 1

The document contains CSS styles specifically for a shop page, defining layout, typography, and responsive design elements. It includes styles for the shop page content, product grid, product cards, and media queries for different screen sizes. Key features include a responsive grid layout, hover effects for product cards, and adjustments for mobile devices.

Uploaded by

chickdiamond6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

/* Shop Page Specific Styles */

.shop-page-content {
padding: 40px 30px;
text-align: center;
}

.shop-page-content h1 {
color: #007bff;
margin-bottom: 10px;
font-size: 2.5em;
}

.shop-page-content .intro-text {
font-size: 1.1em;
color: #555;
margin-bottom: 40px;
}

.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid
*/
gap: 30px;
max-width: 1200px; /* Limit overall grid width */
margin: 0 auto; /* Center the grid */
}

.product-card-link {
text-decoration: none; /* Remove underline from links */
color: inherit; /* Inherit text color */
}

.product-card {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
height: 100%; /* Make all cards same height */
}

.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.product-img {
width: 100%;
height: 200px; /* Fixed height for images */
object-fit: cover; /* Cover the area, cropping if necessary */
border-bottom: 1px solid #eee;
}

.product-card h3 {
font-size: 1.4em;
color: #2c3e50;
margin: 15px 15px 5px;
min-height: 50px; /* Ensure consistent height for titles */
}

.product-card .product-price {
font-size: 1.3em;
color: #27ae60;
font-weight: bold;
margin: 0 15px 10px;
}

.product-card .product-seller {
font-size: 0.9em;
color: #777;
margin: 0 15px 15px;
flex-grow: 1; /* Push seller to bottom if space allows */
}

/* Responsive adjustments for Shop Page */


@media (max-width: 768px) {
.shop-page-content {
padding: 20px;
}
.product-grid {
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}

@media (max-width: 480px) {


.product-grid {
grid-template-columns: 1fr; /* Single column on very small screens */
}
.product-img {
height: 180px;
}
}

You might also like