Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.69/13: Рейтинг темы: голосов - 13, средняя оценка - 4.69
3 / 3 / 0
Регистрация: 10.12.2013
Сообщений: 98
1

Текст уменьшается вместе с размером страницы

20.11.2018, 07:35. Показов 2615. Ответов 3
Метки нет (Все метки)

Доброго времени суток форумчане. Столкнулся с проблемой. Сайт на юкозе. Без мобильной версии. Есть bxslider .4 картинки поверх которых текст. Необходимо, чтобы при просмотре с мобильных устройств текст отображался пропорционально странице.
Работает

HTML5
1
2
3
4
5
6
7
8
<div class="info-block">
        <div class="info-center-block">
            <div class="img-wrap"><img src="имя сайта" alt="img"></div>
            <div class="information-ttl">Заголовок</div>
            <div class="information-ds">А тут будет текста на 2 строки при просмотре с пк
            </div>
        </div>
    </div>
единственное что нашёл в css
CSS
1
.information-ds{padding:20px 0;color:#858585;line-height:1.71}
относящееся к верхней части. И оно работает, т.е. таких 4 блока , при уменьшении размера окна - становится 2, затем 1 и текст под ним.


не работает

А вот что касается именно слайдов - не работает.
HTML5
1
2
3
4
5
6
7
8
9
10
<div class="slide">
            <div class="img-wrap">
                <img src="имя сайта" alt="photo">
            </div>
            <div class="caption">
                <div class="title"><font style="font-size: 36pt;" size="7"><u>Заголовок</u></font></div>
                <div class="desription"><font size="5">Много много текста
                </font></div>
               </div>
        </div>
CSS для верхней части кода
CSS
1
2
3
4
.caption{position:absolute;width:100%;top:40%;transform:translateY(-40%);text-align:center;z-index:2}
.title{color:#e1e1e1;max-width:930px;margin:0 auto;font-family:Rubik;font-size:54px;font-weight:500;line-height:1.3;text-transform:uppercase}
.inside-caption{max-width:1280px;margin:0 auto;padding:0 20px}
.desription{padding:20px 0;color:#e1e1e1;font-family:"Open Sans";font-size:14px;line-height:1.71;max-width:930px;margin:0 auto}

Т.о. Чтобы стало понятно что хочу сделать. Что-то типа "резинового" текста, но мне кажется что в коде много привязок и оно адаптивно не будет работать.
Вот как это выглядит сейчас
Миниатюры
Текст уменьшается вместе с размером страницы   Текст уменьшается вместе с размером страницы   Текст уменьшается вместе с размером страницы  

__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
20.11.2018, 07:35
Ответы с готовыми решениями:

Transition уменьшается при перезагрузки страницы
Есть горизонтальное меню. К нему применил Transition.Все работает.Проблема в том , что когда...

Как сделать так, чтобы задний фон страницы не прокручивался вместе с передним фоном страницы ?
Как сделать так, чтобы задний фон страницы не прокручивался вместе с передним фоном страницы ?

Текст переносится вместе с border-ом от div-а
Почему-то текст переносится вместе с рамкой от div'а, когда мне хотелось бы чтобы текст переносился...

Квадрат размером 100*100 уменьшается до 10*10. На его месте появляется окружность и увеличивается, достигая 10
Квадрат размером 100*100 уменьшается до 10*10. На его месте появляется окружность и увеличивается,...

3
Модератор
Эксперт JSЭксперт HTML/CSS
3819 / 2670 / 1520
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
21.11.2018, 01:51 2
Лучший ответ Сообщение было отмечено I3ers как решение

Решение

Цитата Сообщение от I3ers Посмотреть сообщение
Что-то типа "резинового" текста
CSS
1
font-size:2vw;
1
3 / 3 / 0
Регистрация: 10.12.2013
Сообщений: 98
21.11.2018, 21:24  [ТС] 3
Подскажите пожалуйста ещё. Я впилил бегущую строку в header . После того, как уменьшается размер экрана от неё остается только часть . Первый пост миниатюра 2. Ниже жёлтого и выше картинки узкая полоска - там бегущая строка. Если открывать с мобильного устройства - её вообще нет.
Как прописывать в данном случае условие ? Может отдельный блок css ?
Миниатюры
Текст уменьшается вместе с размером страницы   Текст уменьшается вместе с размером страницы   Текст уменьшается вместе с размером страницы  

0
3 / 3 / 0
Регистрация: 10.12.2013
Сообщений: 98
21.11.2018, 21:25  [ТС] 4
Как видно при полноэкранном режиме она есть скрин 1., Скрин 2 при уменьшении экрана видна часть. Скрин 3 вообще нет. Как можно прописать что бы в обычном режиме ( с пк) было как есть, а при других опускалась вниз.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
21.11.2018, 21:25

Квадрат размером 100*100 уменьшается до 10*10. На его месте появляется круг и увеличивается, достигая 100 в диаметре
Квадрат размером 100*100 уменьшается до 10*10. На его месте появляется окружность и увеличивается,...

Как заставить размер картинки меняться вместе с размером PictureBox
Господа,как заставить размер картинки ,меняться вместе с размером pictureBox1???:friends: ...

Получится ли вернуть адрес на первый элемент массива вместе с размером?
Из Main() вызывается функция, которая формирует массив и возвращает объект класса String в виде:...

Node.js Отправка страницы вместе с данными
Помогите разобраться как get запросом передать данные из БД на страницу клиенту используя Node.js,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru