I am trying to implement horizontal scrolling for video testimonials in a single row on a responsive website, but I am encountering an issue. The width of the container class is larger than col-12, which leaves space and causes horizontal scroll on the page. Additionally, when I add more videos, the space increases. I am using SASS for this layout pattern. The excess space remains visible on the page
.aspx file
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="pn-Product_Wrapper">
<div id="pnProduct" class="pn-Product">
<div id="pnProductContents" class="pn-Product_Contents">
<div class="pn-Product_Link" aria-selected="true">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.css file
.pn-Product_Wrapper
{
position: relative;
padding: 0 11px;
box-sizing: border-box;
}
.pn-Product {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
position: relative;
font-size: 0;
}
.pn-Product_Contents {
float: left;
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
.pn-Product_Link {
text-decoration: none;
color: #888;
font-size: 1.2rem;
font-family: -apple-system, sans-serif;
display: -webkit-inline-box;
display: inline-flex;
-webkit-box-align: center;
align-items: center;
min-height: 44px;
border: 1px solid transparent;
padding: 0 11px;
}