Issue
I am very new to coding and was trying to build this YouTube clone I saw on the internet but I'm stuck. I can't understand what's happening.
I literally did the same thing as the author of the video. But somehow my block of the second video keeps coming under the first one instead of coming at the right of it.
p{
font-family:roboto,ariel;
margin-top:0;
margin-bottom:0;
}
.searchbar{
display:block;
}
.video-preview{
width:300px;
display:inline-block;
vertical-align: top;
margin-right:15px;
}
.thumbnail {
width:300px;
}
.video-title{
margin-top:0;
font-size:14px;
font-weight:500;
line-height:20px;
margin-bottom:12px;
}
.channel-picture{
display:inline-block;
vertical-align: top;
width:50px;
}
.video-info{
display:inline-block;
width:200px;
}
.profile-picture{
width:40px;
border-radius: 50%;
}
.thumbnail-row{
margin-bottom:12px;
}
.video-author,.video-stats{
font-size:12px;
color:rgb(96,96,96);
}
.video-author{
margin-bottom:4px;
}
<input class="searchbar" type="textbox" placeholder="search">
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail" src="thumbnails/thumbnail-1.webp">
</div>
<div class="channel-picture">
<img class="profile-picture"src="channel-pictures/channel-1.jpeg"> </div>
<div class="video-info">
<p class="video-title">
Talking Tech and AI with Google CEO Sundar Pichai!
</p>
<p class="video-author">
Marques Brownlee
</p>
<p class="video-stats">
3.4M views · 6 months ago
</p>
</div>
<div class="video-preview">
<img class="thumbnail" src="thumbnails/thumbnail-2.webp">
<p class="video-title">
Try Not To Laugh Challenge #9
</p>
<p class="video-author">
Markiplier
</p>
<p class="video-stats">
19M views · 4 years ago
</p>
</div>
Solution
Your principal issue is that you didn't close the first video-preview
div, so the other one was its child. About my portion of code added (a container) you can research more about Flex containers with this funny game or reading the proper docs.
I attached a working snippet as example.
Note: I replace the images so we can run in my snippet.
<!DOCTYPE html>
<HTML>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<title>youtube.com clone</title>
<style>
p {
font-family: roboto, ariel;
margin-top: 0;
margin-bottom: 0;
}
.searchbar {
display: block;
}
.video-preview {
width: 300px;
display: inline-block;
vertical-align: top;
margin-right: 15px;
}
.thumbnail {
width: 300px;
}
.video-title {
margin-top: 0;
font-size: 14px;
font-weight: 500;
line-height: 20px;
margin-bottom: 12px;
}
.channel-picture {
display: inline-block;
vertical-align: top;
width: 50px;
}
.video-info {
display: inline-block;
width: 200px;
}
.profile-picture {
width: 40px;
border-radius: 50%;
}
.thumbnail-row {
margin-bottom: 12px;
}
.video-author,
.video-stats {
font-size: 12px;
color: rgb(96, 96, 96);
}
.video-author {
margin-bottom: 4px;
}
/* New code*/
.video-container {
display: flex;
}
</style>
</head>
<body>
<input class="searchbar" type="textbox" placeholder="search">
<div class="video-container">
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail" src="https://picsum.photos/300/200?random=1">
</div>
<div class="channel-picture">
<img class="profile-picture" src="https://picsum.photos/300/200?random=1"> </div>
<div class="video-info">
<p class="video-title">
Talking Tech and AI with Google CEO Sundar Pichai!
</p>
<p class="video-author">
Marques Brownlee
</p>
<p class="video-stats">
3.4M views · 6 months ago
</p>
</div>
</div>
<div class="video-preview">
<img class="thumbnail" src="https://picsum.photos/300/200?random=1">
<p class="video-title">
Try Not To Laugh Challenge #9
</p>
<p class="video-author">
Markiplier
</p>
<p class="video-stats">
19M views · 4 years ago
</p>
</div>
</div>
</body>
</HTML>
Answered By - Franco Gabriel
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.