Опустить текст из слайдера под него

@Прокурорр · Регистрация: 10.04.2017

Студворк — интернет-сервис помощи студентам

День добрый.

Имею вот такой слайдер с текстом - [del]

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

По этому пришёл к выводу что текст нужно опустить под слайдер - [del]

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

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

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

P.S Как мне подсказали - это, цитирую "В слайдере 2 блока - картинка + текст. Надо прописать в CSS media query, чтобы на малых экранах блоки располагались друг под другом, на больших - оставались как есть". Но как это сделать?

Спасибо!

@mrtoxas · 10.04.2017, 12:57

Если вы хотите адаптировать этот слайдер, то лучше будет обрезать изображение так, чтобы на нем был только тот элемент, которой там изображен, без лишних полей вокруг. И разместить это изображение при помощи тега <img>. Так и поисковикам интересней будет и адаптировать будет легче.

@Прокурорр · 10.04.2017, 13:18 **[ТС]**

Всё бы ничего, но мне нужен просто текст засунуть под,а сейчас он на слайдере. По сколько его много, то будет беда на маленьких устройствах. Клиенту я предлагал уменьшить текст + сделать как вы сказали, просто на фото был бы главный элемент, но нет. Хочет именно так, чтобы была картинка и под ним именно текст.

@mrtoxas · 10.04.2017, 13:43

Я и предложил сделать картинку, а под ней текст. Ну да ладно. Увеличивайте высоту слайда. Т.к. текст у вас сейчас прибит при помощи абсолютного позиционирования(.tfs-slider .slide-content-container), убрать у него стиль transform и top, и поставить bottom:0. А изображение выравнивать по центру стилями background-position и background-size.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Прокурорр 0 / 0 / 0 Регистрация: 10.04.2017 Сообщений: 4

	Опустить текст из слайдера под него 10.04.2017, 11:15. Показов 2139. Ответов 3 Метки нет (Все метки) День добрый. Имею вот такой слайдер с текстом - [del] По сколько много текста, на телефонах это выглядеть будет плохо. По этому пришёл к выводу что текст нужно опустить под слайдер - [del] Как это сделать? Я понимаю что нужно применять CSS cтили, но у меня почему-то не получается... Либо какие варианты данной проблемы вы можете мне подсказать? Может есть проще? P.S Как мне подсказали - это, цитирую "В слайдере 2 блока - картинка + текст. Надо прописать в CSS media query, чтобы на малых экранах блоки располагались друг под другом, на больших - оставались как есть". Но как это сделать? Спасибо! 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	10.04.2017, 12:57
	Если вы хотите адаптировать этот слайдер, то лучше будет обрезать изображение так, чтобы на нем был только тот элемент, которой там изображен, без лишних полей вокруг. И разместить это изображение при помощи тега <img>. Так и поисковикам интересней будет и адаптировать будет легче. 1

@Прокурорр 0 / 0 / 0 Регистрация: 10.04.2017 Сообщений: 4
	10.04.2017, 13:18 [ТС]
	Всё бы ничего, но мне нужен просто текст засунуть под,а сейчас он на слайдере. По сколько его много, то будет беда на маленьких устройствах. Клиенту я предлагал уменьшить текст + сделать как вы сказали, просто на фото был бы главный элемент, но нет. Хочет именно так, чтобы была картинка и под ним именно текст. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	10.04.2017, 13:43
	Я и предложил сделать картинку, а под ней текст. Ну да ладно. Увеличивайте высоту слайда. Т.к. текст у вас сейчас прибит при помощи абсолютного позиционирования(.tfs-slider .slide-content-container), убрать у него стиль transform и top, и поставить bottom:0. А изображение выравнивать по центру стилями background-position и background-size. 0