Issue
(Note: I'm working on a assessment which is why it's for a pre-existing thing.)
I have a horizontal media scroller which works however the contents keeps overlapping and I'm not sure why. I have to only use CSS and HTML too. I'm very new to this still so would really appreciate any help! Thankyou!
HTML portion
<section>
<h1 class=heading>Starring</h1>
<div class="media-scroller">
<div class="media-element">
<img src="https://m.media-amazon.com/images/M/MV5BNjM5OTE1MjA3Nl5BMl5BanBnXkFtZTgwOTAxNjk4MDE@._V1_.jpg" alt="Tobin Bell" height="400px">
<p>Tobin Bell</p>
</div>
<div class="media-element">
<img src="https://scontent.fhlz4-1.fna.fbcdn.net/v/t1.6435-9/165941505_293315678847053_9188874086571008155_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=be3454&_nc_ohc=_CZiCziE2joAX-cUwyC&_nc_ht=scontent.fhlz4-1.fna&oh=00_AfAG7qwps8OiPXvCRF4sVYEwdgWNK8cIN_o_c_n9IyghxQ&oe=659FAD8E" alt="Shawnee Smith" height="400px">
<p>Shawnee Smith</p>
</div>
<div class="media-element">
<img src="https://m.media-amazon.com/images/M/MV5BOGQ5ZTI2OGYtZGZjNC00ZDg2LWE4MGItYTk4YTY2OGRiYTU2XkEyXkFqcGdeQXVyMjQwMDg0Ng@@._V1_.jpg" height="400px">
<p>Synnøve Macody Lund</p>
</div>
<div class="media-element">
<img src="https://www.gateworld.net/wp-content/uploads/2017/06/beach01.jpg" alt="Michael Beach" height="400px">
<p>Michael Beach</p>
</div>
<div class="media-element">
<img src="https://latw.org/sites/default/files/styles/artist_profile_l/public/Brand%2C%20Steven%202016%20Amadeus.jpg?itok=Mc-VVfFM" alt="Steven Brand" height="400px">
<p>Steven Brand</p>
</div>
<div class="media-element">
<img src="https://m.media-amazon.com/images/M/MV5BZTM0NDY1ZjctNjFkMC00OTExLTgwNjAtYjE1M2NjNjYwNTQ2XkEyXkFqcGdeQXVyMjQwMDg0Ng@@._V1_.jpg" alt="Renata Vaca" height="400px">
<p>Renata Vaca</p>
</div>
</div>
</section>
CSS portion
.media-scroller {
display: grid;
gap: 30px;
grid-auto-flow: column;
grid-auto-columns: 20%;
padding: 30px;
overflow-x: auto;
overscroll-behaviour-inline: contain;
}
.media-element {
display:grid;
grid-template-rows: min-content;
gap: 4px;
padding: 20px;
background-color: #343434;
border-radius: 10px;
box-shadow: 0 4px 8px 0 #851111,0 6px 18px 0 #B71717;
min-width: 260px;
}
.media-element > img {
inline: 100%;
aspect-ratio: 2/3;
object-fit: cover;
}
I've tried to cap the size of both the html element and the css part, tried aspect ratio and using percentage instead of px. I also played with the padding in all instances in the css with no luck.
Solution
It seems what's causing the issue is the percentage width of the columns (grid-auto-columns: 20%;
) as it foces a certain % width which not necessarily matches the width of the tile. Try to remove it:
.media-scroller {
display: grid;
gap: 30px;
grid-auto-flow: column;
padding: 30px;
overflow-x: auto;
overscroll-behaviour-inline: contain;
}
.media-element {
display:grid;
grid-template-rows: min-content;
gap: 4px;
padding: 20px;
background-color: #343434;
border-radius: 10px;
box-shadow: 0 4px 8px 0 #851111,0 6px 18px 0 #B71717;
min-width: 260px;
}
.media-element > img {
inline: 100%;
aspect-ratio: 2/3;
object-fit: cover;
}
Answered By - annastk
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.