jknapp
9b4e28ece1
All checks were successful
Create Release / build (push) Successful in 3s
- Make all product images uniform size (300px height) with object-fit: cover - Equalize product tile containers using flexbox layout - Inherit site colors and fonts instead of hardcoding white background - Add proper flexbox structure for consistent tile heights 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
106 lines
1.8 KiB
CSS
106 lines
1.8 KiB
CSS
.fw-store-parent {
|
|
align-content: center;
|
|
vertical-align: bottom;
|
|
overflow-y: auto;
|
|
text-align:center;
|
|
margin:0 auto;
|
|
max-width: 1000px;
|
|
}
|
|
|
|
.product-tile {
|
|
align-content: flex-start;
|
|
vertical-align: top;
|
|
display:inline-flex;
|
|
flex-direction: column;
|
|
width:225px;
|
|
margin:15px 15px 15px 15px;
|
|
background: inherit;
|
|
}
|
|
|
|
.product-tile .product-link {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.product-tile img {
|
|
width: 100%;
|
|
height: 300px;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
display: block;
|
|
}
|
|
|
|
.image__badges {
|
|
color: red;
|
|
justify-content: center;
|
|
position: absolute;
|
|
font-weight: bold;
|
|
margin: auto;
|
|
}
|
|
.badge {
|
|
color: red !important;
|
|
margin: auto;
|
|
padding: 60px;
|
|
font-size: 20px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.tile__heading {
|
|
font-size: 0.88em; /* Reduced font size for product titles */
|
|
font-weight: bold;
|
|
margin: 0.5em 0;
|
|
color: inherit;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.tile__description {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px 5px;
|
|
color: inherit;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.tile__prices {
|
|
margin-top: auto;
|
|
padding-top: 0.5em;
|
|
}
|
|
|
|
.tile__price {
|
|
color: inherit;
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* Admin page styles */
|
|
.shortcode-info {
|
|
background: #fff;
|
|
border: 1px solid #ccd0d4;
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.shortcode-info h3 {
|
|
margin-top: 0;
|
|
color: #23282d;
|
|
}
|
|
|
|
.shortcode-info code {
|
|
background: #f1f1f1;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.shortcode-info p {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.shortcode-info em {
|
|
color: #666;
|
|
font-style: italic;
|
|
} |