Hello i am trying to replicate youtube. I am coding and aligning video list. I added video title. But the problem is video title is not showing properly. video title width alignment is not proper. the video title is showing on the top of other videos. video title exceed the width. i want the video title to fit with in the video. Kindly help me to fix this.
body{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.flexbox{
display: flex;
align-items: center;
}
nav{
padding: 10px 2%;
justify-content: space-between;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: #fff;
position: static;
top: 0;
z-index: 10;
}
.navright img{
width: 25px;
margin-right: 25px;
}
.navright .profile{
width: 30px;
border-radius: 30px;
}
.navleft .menuicon{
width: 25px;
}
.navleft .logo{
width: 130px;
padding-left: 20px;
}
.navmiddle .voice{
width: 16px;
}
.navmiddle .search{
width: 16px;
}
.navmiddle .searcharea{
border: 1px solid #ccc;
margin-right: 15px;
padding: 8px 12px;
border-radius: 25px;
}
.navmiddle .searchbox{
width: 400px;
}
.sidebar{
background: #fff;
width: 15%;
height: 100vh;
position: fixed;
padding-left: 2%;
padding-top: 20px;
z-index: -10;
}
.shortcuts a img{
width: 20px;
margin-right: 20px;
}
.shortcuts a{
display: flex;
align-items: center;
flex-wrap: wrap;
text-decoration: none;
width: fit-content;
}
.shortcuts a:first-child{
color: red;
}
.sidebar hr{
border: 0;
width: 85%;
height: 1px;
background: #ccc;
}
.small-sidebar{
width: 5%;
height: 200px;
}
.container{
padding-left: 17%;
padding-right: 2%;
padding-top: 20px;
padding-bottom: 20px;
}
.container .banner{
width: 100%;
}
.small-sidebar p{
display: none;
}
.flexbox .channelpic{
border-radius: 40px;
width: 50px;
}
.listcontainer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
grid-column-gap: 16px;
grid-row-gap: 30px;
margin-top: 15px;
}
.vidlist .thumbnail{
width: 100%;
border-radius: 5px;
}
.vidlist .flexbox{
align-items: flex-start;
margin-top: 7px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="flexbox">
<div class="navleft flexbox">
<img src="/images/menu.png" alt="" class="menuicon" >
<img src="/images/logo.png" alt="" class="logo" >
</div>
<div class="navmiddle flexbox">
<div class="searcharea">
<input type="text" placeholder="Search" class="searchbox">
<img src="/images/search.png" alt="" class="search" >
</div>
<img src="/images/voice-search.png" alt="" class="voice" >
</div>
<div class="navright">
<img src="/images/upload.png" alt="" >
<img src="/images/notification.png" alt="" >
<img src="/images/simon.png" alt="" class="profile">
</div>
</nav>
<!---sidebar-->
<div class="sidebar">
<div class="shortcuts">
<a href=""><img src="images/home.png" alt="" srcset=""><p>Home</p></a>
<a href=""><img src="images/explore.png" alt="" srcset=""><p>Explore</p></a>
<a href=""><img src="images/subscriprion.png" alt="" srcset=""><p>Subscription</p></a>
<a href=""><img src="images/library.png" alt="" srcset=""><p>Library</p></a>
<a href=""><img src="images/history.png" alt="" srcset=""><p>History</p></a>
<a href=""><img src="images/playlist.png" alt="" srcset=""><p>Playlist</p></a>
<a href=""><img src="images/messages.png" alt="" srcset=""><p>Messages</p></a>
<hr>
</div>
<div class="subscriptionlist">
<h1>Subscription</h1>
<a href=""><img src="/images/tom.png" alt="" srcset=""><p>Tom Hardy</p></a>
<a href=""><img src="/images/Jack.png" alt="" srcset=""><p>Jack Nichol</p></a>
<a href=""><img src="/images/gerard.png" alt="" srcset=""><p>Gerard Pique</p></a>
<a href=""><img src="/images/megan.png" alt="" srcset=""><p>Megan Steve </p></a>
</div>
</div>
<div class="container">
<div class="banner">
<img src="/images/banner.png" alt="" >
</div>
<div class="listcontainer">
<div class="vidlist">
<img src="/images/thumbnail1.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
<a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail2.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
<a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail3.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
<a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail4.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
<a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail5.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
<a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail6.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
<a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail7.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
<a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail8.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
<a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Just add word-break:break-all to .vidinfo > a.
.vidinfo > a {
word-break: break-all;
}