I’m trying to make a streaming service website as practice, but the problem is when I put images, titles and episode lists in a way like columns and rows. For the image on top over I, tried changing the margin or other things but it didn’t work.
I tried to change the margin, and perhaps put a container on it but it didn’t work, I want it to be like this:
existing streaming service
It ended up lining up. Likes this:
My Streaming Service
I want to line up at least four columns containing a poster, title and episode. At first, the row is ok but the second and further overlaps on top of the first. This is the code:
.column {
background-color: rgb(249, 215, 142);
float: left;
width: 200px;
padding: 20px;
height: 200px;
grid-template-columns: 1fr 1fr 1fr;
}
.row:after {
content: "";
display: grid;
clear: both;
}
<div class="row">
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Oshi No Ko Season 2.jpg"
style="width:200px;height:270px; margin-bottom:10px; margin-right: 15px; border:none;">
<p class="video-title">Oshi No Ko Season 2</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Failure Frame Season 1.jpg"
alt="Failure Frame Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
</img>
<p class="video-title">Failure Frame</p>
<p class="video-episode">Season 1 Episode 1</p>
<p class="video-title">Sub</p>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Vanguard Divinez Season 2.jpg"
alt="Vanguard Divinez Season 2" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
</img>
<p class="video-title">Vanguard Divinez Season 2</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Alya Sometimes Hides Her Feelings in Russian Season 1.jpg"
alt="Alya Sometimes Hides Her Feelings in Russian Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">Alya Sometimes Hides Her Feelings in Russian Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy.jpg"
alt="7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">7th Time Loop The Villainess Enjoys a Carefree Life Married to Her Worst Enemy Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title">Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World.jpg"
alt="As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">As A Reincarnated Aristocrat I'll Use My Appraisal Skill to Rise in The World Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Chillin' in Another World with Level 2 Cheats.jpg"
alt="Chillin' in Another World with Level 2 Cheats Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">Chillin' in Another World with Level 2 Cheats Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/Fairy Tail 100 Years Quest.jpg"
alt="Fairy Tail 100 Years Quest Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">Fairy Tail 100 Years Quest Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
<div class="column">
<img src="/Users/sebastianpendragon/Desktop/Software Engineer Project/Image Source/I Parry Everything.jpg"
alt="I Parry Everything Season 1" style="width:210px;height:270px; margin-bottom:10px; margin-right: 15px">
<p class="video-title">I Parry Everything Season 1</p>
<p class="video-episode">Episode 1</p>
<p class="video-title"> Dub|Sub</p>
</img>
</div>
</div>
Anyone know how to fix it.
2
Answers
Use a responsive grid, adjusting the
10em
value lower for smaller tiles and higher for larger tiles.try to use flex.
This will make the site more responsive.
And be more careful when closing tags. in your case
<img >
An example of the use of flex:
HTML
CSS