0

День добрый.

Имею вот такой слайдер с текстом - введите сюда описание изображения

По сколько много текста, на телефонах это выглядеть будет плохо.

По этому пришёл к выводу что текст нужно опустить под слайдер - введите сюда описание изображения

Как это сделать?

Я понимаю что нужно применять CSS cтили, но у меня почему-то не получается...

Либо какие варианты данной проблемы вы можете мне подсказать? Может есть проще?

1 ответ 1

1

Пример

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.slider {
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.slide {
  display: flex;
  align-items: center;
}

.slide>div {
  width: 50%;
}

.slide-pict {
  line-height: 0;
}

.slide-pict>img {
  max-width: 100%;
}

.slide-text {
  padding: 15px;
}

@media screen and (max-width: 600px) {
  .slide {
    display: block;
    text-align: center;
  }
  .slide>div {
    width: 100%;
  }
}
<div class="slider">
  <div class="slide">
    <div class="slide-pict">
      <img src="http://placehold.it/450x250" alt="">
    </div>
    <div class="slide-text">
      <p>Я понимаю что нужно применять CSS cтили, но у меня почему-то не получается... Либо какие варианты данной проблемы вы можете мне подсказать? Может есть проще?</p>
    </div>
  </div>
</div>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.