ayrisdev/crawl4ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(marketplace): prevent hero image overflow and secondary card stretching

Browse Source 
- Fixed hero image to 200px height with min/max constraints
- Added object-fit: cover to hero-image img elements
- Changed secondary-featured align-items from stretch to flex-start
- Fixed secondary-card height to 118px (no flex: 1 stretching)
- Updated responsive grid layouts for wider screens
- Added flex: 1 to hero-content for better content distribution

These changes ensure a rigid, predictable layout that prevents:
1. Large images from pushing text content down
2. Single secondary cards from stretching to fill entire height
This commit is contained in:
unclecode
2025-10-11 12:52:04 +08:00
parent abe8a92561
commit 216019f29a
1 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/md_v2/marketplace/marketplace.css
View File

@@ -231,7 +231,9 @@ a:hover {
.hero-image { .hero-image {
width: 100%; width: 100%;
height: 240px; height: 200px;
min-height: 200px;
max-height: 200px;
background: linear-gradient(135deg, rgba(80, 255, 255, 0.1), rgba(243, 128, 245, 0.05)); background: linear-gradient(135deg, rgba(80, 255, 255, 0.1), rgba(243, 128, 245, 0.05));
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@@ -243,6 +245,14 @@ a:hover {
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
filter: brightness(1.1) contrast(1.1); filter: brightness(1.1) contrast(1.1);
overflow: hidden;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
} }
.hero-image::after { .hero-image::after {
@@ -257,6 +267,10 @@ a:hover {
.hero-content { .hero-content {
padding: 1.5rem; padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
.hero-badge { .hero-badge {
@@ -301,9 +315,9 @@ a:hover {
/* Secondary Featured */ /* Secondary Featured */
.secondary-featured { .secondary-featured {
grid-column: 1 / -1; grid-column: 1 / -1;
height: 380px; min-height: 380px;
display: flex; display: flex;
align-items: stretch; align-items: flex-start;
} }
.featured-secondary-cards { .featured-secondary-cards {
@@ -311,7 +325,7 @@ a:hover {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
justify-content: space-between; align-items: stretch;
} }
.secondary-card { .secondary-card {
@@ -321,8 +335,10 @@ a:hover {
transition: all 0.3s ease; transition: all 0.3s ease;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
height: calc((380px - 1.5rem) / 3); height: 118px;
flex: 1; min-height: 118px;
max-height: 118px;
flex-shrink: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
} }
@@ -875,10 +891,13 @@ a:hover {
.secondary-featured { .secondary-featured {
grid-column: 3 / 5; grid-column: 3 / 5;
grid-row: 1; grid-row: 1;
min-height: auto;
} }
.featured-secondary-cards { .featured-secondary-cards {
display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
flex-direction: unset;
} }
.main-content { .main-content {
@@ -906,10 +925,13 @@ a:hover {
.secondary-featured { .secondary-featured {
grid-column: 3 / 6; grid-column: 3 / 6;
min-height: auto;
} }
.featured-secondary-cards { .featured-secondary-cards {
display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
flex-direction: unset;
} }
.sponsored-section { .sponsored-section {