У меня есть div, который отображает некоторые продукты внутри слайдера, как на картинке ниже:
При изменении размера экрана, носитель запросы работают, и содержимое переставляется:
Проблема возникает, когда div, содержащий ползунок продуктов, находится внутри bootstrap div col-lg -Икс. Например, изображение того, что происходит, когда оно находится внутри div.row> div.col-lg-8 (изображения обрезаются, а содержимое не переставляется, как это происходит при изменении размера экрана):
У div есть следующее html:
#productSlider .MS-content .item {
display: inline-block;
width: 20%;
position: relative;
vertical-align: top;
overflow: hidden;
height: 100%;
white-space: normal;
}
@media screen and (max-width: 1200px) {
#productSlider .MS-content .item {
width: 25%;
}
}
@media screen and (max-width: 991px) {
#productSlider .MS-content .item {
width: 33.3333%;
}
}
@media screen and (max-width: 768px) {
#productSlider .MS-content .item {
width: 50%;
}
}
@media screen and (max-width: 575px) {
#productSlider .MS-content .item {
width: 100%;
}
.sliderHeading {
font-size: 18px !important;
margin: 30px 0 20px !important;
}
}
img {
border: 1px solid black;
}
<div
class="block"
style="padding: 0 50px; position: relative; margin-bottom: 40px;"
>
<div id="productSlider" class="" style="position: relative;">
<div
class="MS-content"
style="white-space: nowrap; overflow: hidden; margin: 0px;"
>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
<div class="item">
<div style="background-color: #fff; padding: 18px; margin: 0 8px;">
<a style="text-decoration: none; color: #000" href="#">
<img
style="max-width: 200px; height: auto; max-height: 200px; height: 200px ;display: block; margin-left: auto; margin-right: auto;"
src="./product.png"
/>
<h2>
My product title
</h2>
</a>
</div>
</div>
</div>
<div class="MS-controls">
<button
class="MS-left"
style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); left: -28px; border-radius: 4px; border: 0px;"
>
<a
><img
src="./arrow-left.png"
alt=""
style="max-width: 22px;"
/></a></button
><button
class="MS-right"
style="background-color: rgba(255, 255, 255, 0.77); padding: 15px; box-shadow: rgba(179, 179, 179, 0.32) 0px 0px 10px 2px; width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); right: -28px; border-radius: 4px; border: 0px;"
>
<a
><img
src="./arrow-right.png"
alt=""
style="max-width: 22px;"
/></a>
</button>
</div>
</div>
</div>
И он ломается, когда его помещают внутрь
<div class="row">
<div class="col-lg-8">
... slider code here
</div>
</div>