I’m relatively new to CSS and building a website using HTML and CSS (no experience with JavaScript). I have a horizontal scrolling section for some highlight 'cards' using a CSS Grid. Each card has a box-shadow to add some depth.
The issue is that the box-shadow is clipped on the left side of the first card and the right side of the last card.
What I've Tried So Far
- Adding
scroll-padding-leftto offset, this prevents clipping but then the section's alignment is off from the rest of the website and there is an offset of the remaining cards during the scroll snapping. - Added
margin-leftto the first card, shadows were visible but the first card was smaller than others because margins reduced the content width within the grid columns. - Added a spacer div before the first card. Shadows had space but the spacer misaligned in the same way as #1.
- Switching to flexbox had the same issue.
- Inserted an additional div between
media-scrollerandmedia-card, same issue of clipping occurs.
Is there any way to both (A) add padding around the horizontal scroll to prevent the box-shadows from being clipped, and (B) align the card to the left alongside all other elements on the website?
https://jsfiddle.net/joshhhh/45vpyt7h/
:root {
/* Global Styles */
--spacing-unit: 1rem;
--margin-xs: calc(var(--spacing-unit)/2);
--margin-s: var(--spacing-unit);
--margin-m: calc(var(--spacing-unit)*2);
--margin-l: calc(var(--spacing-unit)*3);
--margin-xl: calc(var(--spacing-unit)*4);
}
* {
margin: 0;
box-sizing: border-box;
}
body {
width: 80%;
margin: 0 auto;
}
.scroll-section {
margin-bottom: var(--margin-xl);
}
.media-scroller {
display: grid;
gap: var(--margin-m);
grid-auto-flow: column;
grid-auto-columns: 22%;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
clip-path: -50px;
}
.snaps-inline {
scroll-snap-align: start;
}
.media-card {
background: url('images/media.png') no-repeat;
background-size: cover;
background-position: center;
box-shadow: 0px 6px 10px rgba(0, 0, 0, .5);
border-radius: 25px;
aspect-ratio: 4 / 5;
display: flex;
flex-direction: column;
justify-content: end;
}<div class="content-section">
<div class="section-header">
<h2>Content Lorem Ipsum</h2>
</div>
<div class="media-scroller">
<div class="media-card media-card-1 snaps-inline">
<h3>lorem ipsum</h3>
<p>lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="media-card media-card-2 snaps-inline">
<h3>lorem ipsum</h3>
<p>lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="media-card media-card-3 snaps-inline">
<h3>lorem ipsum</h3>
<p>lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="media-card media-card-4 snaps-inline">
<h3>lorem ipsum</h3>
<p>lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="media-card media-card-5 snaps-inline">
<h3>lorem ipsum</h3>
<p>lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div class="media-card media-card-6 snaps-inline">
<button>See More!</button>
<h3>lorem ipsum</h3>
<p>lorem ipsum lorem ipsum lorem ipsum</p>
</div>
</div>
</div>
.media-scrollerand counter it with negative margin?padding: 0 10px; margin: 0 -10px;