I'm re-creating a YouTube page using media query. However, when I change the size of the browser, I find that on the right side, some content is always cut. I used grid for the blocks. I tried to set some margin in body, but it didn't work.
Since I couldn't upload the entire code, I re-created the problem. My code is below
.thumbnail-1 {
width: 100%;
}
.video-info-grid {
display: grid;
grid-template-columns: 50px 1fr;
}
.video-info {
display: inline-block;
width: 250px;
}
.thumbnail-row {
margin-bottom: 8px;
position: relative;
}
.video-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 16px;
row-gap: 40px;
}
@media (max-width: 800px) {
.video-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1199px) and (max-width: 801px) {
.video-grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (min-width: 1200px) {
.video-grid {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
@media (min-width: 800px) {
.video-info {
width: 350px;
}
.video-title {
font-size: 16px;
line-height: 24px;
}
.video-author,
.video-stats {
font-size: 14px;
}
}
<div class="video-grid">
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail-1" src="images/thumbnail-2.webp" />
</div>
<div class="video-info-grid">
<div class="channel-picture"></div>
<div class="video-info"></div>
</div>
</div>
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail-1" src="images/thumbnail-2.webp" />
</div>
<div class="video-info-grid">
<div class="channel-picture"></div>
<div class="video-info"></div>
</div>
</div>
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail-1" src="images/thumbnail-2.webp" />
</div>
<div class="video-info-grid">
<div class="channel-picture"></div>
<div class="video-info"></div>
</div>
</div>
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail-1" src="images/thumbnail-2.webp" />
</div>
<div class="video-info-grid">
<div class="channel-picture"></div>
<div class="video-info"></div>
</div>
</div>
</div>
try the code like this and tell me if it's work for you
.thumbnail-1 {
width: 100%;
}
.video-info-grid {
display: flex;
justify-content: space-between;
gap: 20px;
}
.video-info {
display: inline-block;
width: 250px;
}
.thumbnail-row {
margin-bottom: 8px;
position: relative;
}
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
column-gap: 16px;
row-gap: 40px;
}
@media (min-width: 800px) {
.video-info {
width: 350px;
}
.video-title {
font-size: 16px;
line-height: 24px;
}
.video-author,
.video-stats {
font-size: 14px;
}
}
<div class="video-grid">
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail-1" src="https://picsum.photos/200" />
</div>
<div class="video-info-grid">
<div class="channel-picture"></div>
<div class="video-info"></div>
</div>
</div>
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail-1" src="https://picsum.photos/200" />
</div>
<div class="video-info-grid">
<div class="channel-picture"></div>
<div class="video-info"></div>
</div>
</div>
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail-1" src="https://picsum.photos/200" />
</div>
<div class="video-info-grid">
<div class="channel-picture"></div>
<div class="video-info"></div>
</div>
</div>
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail-1" src="https://picsum.photos/200" />
</div>
<div class="video-info-grid">
<div class="channel-picture"></div>
<div class="video-info"></div>
</div>
</div>
</div>