Как сделать респонсив заголовок?

C

41

chigher

18 марта 2016, 07:37

639

Сайт на вордпресс.

В блоге есть картинка с заголовком.

Когда длина заголовка превышает размер одной строки, то текст заголовка ломает верстку и съезжает вниз.

Как подправить стили, чтобы зелёная область, где расположен заголовок растягивалась вниз вместе с текстом?

Вот собственно блоки css:

1.

2.

Заранее благодарю за любую помощь!

1

204

дани мапов

18 марта 2016, 08:23

#1

Код не полностью. Попробуйте с помощью min-height исправить.

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)

58

sanika

18 марта 2016, 08:31

#2

Дело не в картинке а шрифте. Тут надо или на яваскрипте или на php считать сколько символов заголовка и если оно больше=N, то делать шрифт 24, допустим, а не 34

---------- Добавлено 18.03.2016 в 10:34 ----------

Я бы сделал так, потому что у вас скорее всего используется псевдоэлемент :after для того чтобы текст был на элементе картинки и менять его тоже надо динамически. Но поменять размер шрифта в этом случае проще.

З.Ы. А еще лучше - дайте урл сайта тогда можно будет точно сказать

1

LinkBoss.net - Трастовые ссылки для увеличения трафика в 10 раз! (http://linkboss.net/)

Стиль для тега H1 Размер полной новости в "Украли" дизайн

300

tommy-gung

18 марта 2016, 09:06

#3

position:absolute;

bottom:0;

1

Здесь не могла быть ваша реклама

L0

76

Leks007

18 марта 2016, 09:12

#4

указать размер шрифта нужно не в пикселях, а в %

вот хорошая статья

https://habrahabr.ru/post/42151/

1

Да, я опасен! Я говорю вам - правду

83

oux

18 марта 2016, 09:18

#5

Для .meta h1 добавить {position: absolute; bottom: 0; left: 0; z-index: 10; box-sizing: border-box; width: 100%;}

1

C

41

chigher

18 марта 2016, 09:57

#6

tommy-gung:
position:absolute;
bottom:0;

Помогло! Спасибо!

Open AI тестирует память для ChatGPT

Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы