БЛОГ НА HUSL


Проблема slick-slider, ломает верстку

Автор вопроса: Amir

Как вообще адаптируются такие ситуации? Просто слайдер ломает блок, и текст ломается также. Я в маленьком ступоре подскажите что можно сделать.Блок просто уходит в право, и не при каком уменьшении это не фиксистся. Помогите любым советом! Пожалуйста

Норма:
Норма

Сломана:
Сломана

$(document).ready(function() {
  $('.slider').slick({
    arrows: true,
    slidesToShow: 4,
    infinite: true,
    slidesToScroll: 1,
    draggable: false,
    responsive: [{
        breakpoint: 720,
        settings: {
          slidesToShow: 1,
          adaptiveHeight: true
        }
      },
      {
        breakpoint: 832,
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 1154,
        settings: {
          slidesToShow: 3,
        }
      },
      {
        breakpoint: 1217,
        settings: {
          slidesToShow: 3,
        }
      },
    ]
  });
});
.about {
  background-color: #f8f8f8;
  width: 100%;
  height: 850px;
  padding-top: 100px;
  padding-right: 5px;
}

@media (max-width: 1154px) {
  .about .slider {
    position: relative;
    width: 960px;
    right: 70px;
  }
  .about .slider .slick-next {
    right: 45px;
  }
}

@media (max-width: 1217px) {
  .about .slider__main {
    position: relative;
    right: 20px;
  }
  .about .slider {
    width: 850px;
  }
  .about .slider .slick-next {
    right: 7px;
  }
}

@media screen and (max-width: 1135px) {
  .about .slider {
    width: 750px;
  }
  .about .slider .slick-next {
    right: -25px;
  }
}

@media screen and (max-width: 832px) {
  .about .slider {
    width: 550px;
    bottom: 50px;
    left: -10px;
  }
  .about .slider .slick-next {
    right: 9px;
  }
}

@media screen and (max-width: 720px) {
  .about .slider {
    width: 250px;
    left: 130px;
  }
  .about .slider .slick-next {
    right: 11px;
  }
  .about .slider .about__main {
    display: flex;
    margin: 75px 100px 0 55px;
    justify-content: space-around;
  }
  .about .slider .about__main h4 {
    font-size: 10px;
  }
}

@media screen and (max-width: 685px) {
  .about .slider {
    margin-left: 50px;
  }
}

@media screen and (max-width: 1145px) {
  .about .about__main {
    margin: 75px 50px 0 0px;
  }
}

@media screen and (max-width: 1020px) {
  .about {
    position: relative;
    top: 420px;
  }
}

@media screen and (max-width: 825px) {
  .about .about__main {
    display: flex;
    margin: 75px 100px 0 55px;
    justify-content: space-around;
  }
  .about .about__main h4 {
    font-size: 12px;
    font-family: "RobotoSlab";
    color: #555;
    line-height: 1.714;
    text-align: left;
    font-weight: 500;
    margin: 0 0 0 35px;
  }
}

.about h1 {
  text-align: center;
  font-size: 20px;
  font-family: "Montserrat";
  color: #555;
  text-transform: uppercase;
  font-weight: 600;
}

.about h1:after {
  content: "";
  height: 2px;
  position: relative;
  bottom: 25px;
  width: 50px;
  background-color: #555;
  display: block;
  margin: 50px auto 0;
}

.about h3 {
  text-align: center;
  font-size: 16px;
  font-family: "RobotoSlab";
  color: #555;
}

.about .about__main {
  display: flex;
  margin: 75px 0 0 65px;
}

.about .about__main h4 {
  font-size: 14px;
  font-family: "RobotoSlab";
  color: #555;
  line-height: 1.714;
  text-align: left;
  font-weight: 500;
  margin: 0 0 0 35px;
}

.about .slick-list {
  overflow: hidden;
  margin: 0 -27px;
}

.about .slick-track {
  display: flex;
}

.about .slick-slide {
  width: 245px;
}

.about .slick-slide .slider__img {
  width: 240px;
  margin: 0 25px;
}

.about .slider {
  position: relative;
  width: 1020px;
  margin-top: 75px;
  margin-left: 100px;
}

.about .slider .slider__item {
  position: relative;
  margin: 0 17px 0 0;
}

.about .slider .slider__main {
  margin-top: 20px;
  line-height: 25px;
  text-align: center;
  margin-left: 25px;
}

.about .slider .slider__main h5 {
  font-size: 15px;
  font-family: "RobotoSlab";
  color: #555;
  font-weight: 500;
}

.about .slider .slider__main h6 {
  text-transform: uppercase;
  font-size: 14px;
  font-family: "Montserrat";
  color: #555;
  font-weight: 600;
}

.about .slider .slick-arrow {
  position: absolute;
  font-size: 0;
  top: 30%;
  z-index: 10;
  height: 30px;
  width: 30px;
  background: #c0301c;
}

.about .slider .slick-prev {
  transition: all 0.4s ease 0s;
  left: -1px;
  background-image: url('../img/left.png');
  background-position: 45% 45%;
  background-repeat: no-repeat;
}

.about .slider .slick-prev:hover {
  background-image: url('../img/left.png');
  background-color: #8e8e8e;
}

.about .slider .slick-next {
  right: -26px;
  background-image: url('../img/right.png');
  background-position: 55% 45%;
  background-repeat: no-repeat;
}

.slider__text:hover {
  opacity: 1;
}

.sl {
  position: relative;
  list-style-type: none;
}

.slider__text {
  display: flex;
  margin-left: 26px;
  position: absolute;
  justify-content: center;
  align-items: flex-end;
  top: 0;
  left: 0;
  opacity: 0;
  width: 240px;
  background: rgba(85, 85, 85, 0.6);
  height: 100%;
  text-align: center;
  -webkit-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
}

.slider__text img {
  margin: 0 10px;
  margin-bottom: 40px;
}

.slider__text img:hover {
  background: #c0301c;
  padding: 10px 15px 10px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet" />

<section class="about">
  <div class="container">
    <h1>About Us</h1>
    <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr amet</h3>
    <div class="about__main">
      <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sediam nonumy eirmod tempor invidunt ut labore et dolore aliquyam erat, sed diam voluptua. At vero eos etaccusam et justo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est ipsum dolor sit amet. Lorem ipsum dolor et dolore aliquyam erat.
        <p>Lorem ipsum dolor sit amet. Lorem ipsum eat.</h4>
      <h4>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sediam nonumy eirtempor invidunt ut labore et dolore aliquyam erat, sed diam voluptua. At vero eos eaccusamet justo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
        ipsum dolor sit amet. Lorem ipsum dolor et dolore aliquyam erat.
        <p>Loreipsum dolor sit amet. Lorem ipsum dolor et.</p>
      </h4>
    </div>
    <div class="slider">
      <div class="slider__item">
        <div class="sl">
          <ul>
            <li><span class="slider__text">
                        <a href="#"><img src="img/Facebook.png"></a>
                        <a href="#"><img src="img/Twitter.png"></a>
                        <a href="#"><img src="img/g.png"></a>
                        <a href="#"><img src="img/linkedin.png"></a></span><img src="img/1.png" class="slider__img"></li>
        </div>
        <div class="slider__main">
          <h6>Md. Khalil Uddin</h6>
          <h5>Head of Ideas</h5>
        </div>
      </div>
      <div class="slider__item">
        <div class="sl">
          <ul>
            <li><span class="slider__text">
                        <a href="#"><img src="img/Facebook.png"></a>
                        <a href="#"><img src="img/Twitter.png"></a>
                        <a href="#"><img src="img/g.png"></a>
                        <a href="#"><img src="img/linkedin.png"></a></span><img src="img/2.png" class="slider__img"></li>
        </div>
        <div class="slider__main">
          <h6>Rubel Miah</h6>
          <h5>Lead WordPress Developer</h5>
        </div>
      </div>
      <div class="slider__item">
        <div class="sl">
          <ul>
            <li><span class="slider__text">
                        <a href="#"><img src="img/Facebook.png"></a>
                        <a href="#"><img src="img/Twitter.png"></a>
                        <a href="#"><img src="img/g.png"></a>
                        <a href="#"><img src="img/linkedin.png"></a></span><img src="img/3.png" class="slider__img"></li>
        </div>
        <div class="slider__main">
          <h6>Shamim Mia</h6>
          <h5>Sr.Web Developer</h6>
        </div>
      </div>
      <div class="slider__item">
        <div class="sl">
          <ul>
            <li><span class="slider__text">
                        <a href="#"><img src="img/Facebook.png"></a>
                        <a href="#"><img src="img/Twitter.png"></a>
                        <a href="#"><img src="img/g.png"></a>
                        <a href="#"><img src="img/linkedin.png"></a></span><img src="img/4.png" class="slider__img"></li>
        </div>
        <div class="slider__main">
          <h6>Jhon Doe</h5>
            <h5>Front-end Developer</h5>
        </div>
      </div>
      <div class="slider__item">
        <div class="slider__main">
          <h6>Amir Khalitov</h6>
          <h5>Web Developer</h5>
        </div>
        </ul>
      </div>
    </div>
  </div>
</section>


Источник

Ответы (1 шт):

Автор решения: Amir

В данной работе я задал min-width блоку .about и слайдер не смог больше двигаться и ломать верстку. Это и было решение. Я не мог зафиксировать слайдер. Если вашу верстку будет так же ломать какой либо элемент поиграйтесь с ограничением и резиновой версткой.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.