Github user derrickdoo commented on the issue:
https://github.com/apache/kafka-site/pull/92
@manjuapu to fix the video clipping issue you need to switch over to
relative sizing when you viewport gets smaller than the full size embed (525px)
+ the total left/right padding/margin (20px) on your content area. Here's the
CSS you need:
`
@media only screen and (max-width: 545px) {
.yt_series {
width: 100%;
}
}
`
There's also a few more tweaks you should make to get things synced up with
the design comps.
1. Remove the default borders on your video embeds:
`
.yt_series{
border: none;
}
`
2. At 1125px wide, you're folding the video selector items down to just the
1-4 clickable bullets below the video embed. You should center the video and
clickable bullets to be consistent with the rest of layout
`
@media only screen and (max-width: 1125px) {
.yt_series {
margin: 0 auto;
}
.video__list {
text-align: center;
}
}
`
Last thing just for readability I'd consider grouping all your media
queries together. For instance you're looking for
`
@media only screen and (max-width: 1125px)
`
In 4 places in style.css. Just group all that stuff up.
---
