Собакен говорит по-вашему

[Tenno Seremel]

Это работает только на главной (адаптивного) дневника, потому что только там показывается эпиграф, в который надо вставлять текст. Любой другой текст в эпиграфе никак не мешает работе.

Чтобы Собакен появлялся, ширина экрана должна быть не менее 992 пикселей (так дайри написаны). Позицию блока с текстом устанавливаю в 3 местах, в зависимости от разрешения, потому что положение Собакена меняется в зависимости от размеров экрана.

Если вы напишете слишком много текста, то он наползёт на полосу меню, а верхняя его часть уйдёт за экран. Ничего не поделаешь.

Кстати, я ставлю элементу #page-t стиль position: static, чтобы он не мешал мне позиционировать блок. Надеюсь, это ничего не сломает Вроде пока работает. Если что-то поломается, придётся координаты от другой точки задавать.

Найдёте баги — пишите в комментариях.

<div class="mascot-text"><span class="mascot-text-content">Теперь-то я на своём месте.</span></div>

#page-t
{
	position: static !important;
}
.mascot-text-content
{
	position: absolute;
	left: 0;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
}
@media all and (min-width: 992px) {
	.mascot-text
	{
		position: absolute;
		z-index: 100;
		left: calc(50% + 119px);
		top: 4px;
		box-sizing: border-box;
		width: 133px;
		height: 82px;
		background: #fff;
		color: #000;
		font-size: 12px;
		font-style: normal;
		border-radius: 7px;
	}
}
@media all and (min-width: 1200px) {
	.mascot-text
	{
		left: calc(50% + 219px);
	}
}
@media all and (min-width: 1400px) {
	.mascot-text
	{
		left: calc(50% + 309px);
	}
}
@media not all and (min-width: 992px) {
	.mascot-text
	{
		display: none !important;
	}
}

Результат:



P.S. Если текст находится не по центру облачка, то, возможно, пришло время обновить браузер…

Comments

[Лис Хикару]

О как, второй части мне не хватало, на что влияет это item?

И вот еще заметила - у вас окошко code раскрывается при тапе на него, так же у меня получается и везде где старые дизайны. Но в моем адаптативном это не работает (окошко не расхлапывается, причем с обоих моих устройств). Если переключаю на старый диз - работает. Это что-то у меня или на дайрах и лечится ли каким-то кодом?

[Tenno Seremel]

Лис Хикару, это блок, в котором лежит собственно комментарий. Но посты тоже лежат в своих item'ах. С разными классами у дайриков как-то туговато

Оно у всех должно работать. Но оно работает только на странице комментариев, на странице дневника почему-то нет.

[Лис Хикару]

Да тут вообще на разных устройствах разные элементы по разному отображаются. На одних видно, что настройки повлияли, на других девайсах - части настроек почему-то нет... а ещё у меня постоянно настройки сейчас слетают. Сохраняю, проверяю - все на месте. Захожу через некоторое время - уехало, лезу в настройки - нету больше дописанной строчки. Куда делась?))

[Tenno Seremel]

Лис Хикару, иногда это кэширование в браузере. Но вот в настройках, по идее, пропадать не должно Хотя некоторые правила дайрики не любят. Напишешь, например, :not([style]), а style они вырежут. Потому что захотелось. Ну или прямые ссылки на картинки, даже если они лежат на самих дайриках, не работают в дайревом CSS.

[Лис Хикару]

Опа, стоило пожаловаться в ноосферу - и окошки code стали нормально расхлапываться и у меня тоже)) неужели что-то там правят!))

Не уверена, не кэширование. Потому что всётаки проверяла (чистила после установки новых, и смотрела что вышло после), а ещё внезапно откат: показывало с новыми настройками, захожу через время - не показывает. При этом на планшете - все на месте. Аж два раза под ряд для надёжности на телефоне кеш выгребла - не сработало. Плюнула и через время - само вернулось... но веселее было, когда это все не сработало, залезла в настройки - а там части новых строчек с кодами нету. В общем, домик с привидениями))
А ещё в какой-то момент отправленные посты остались у некоторых без аватар. Да там работа на заднем плане, видать идёт, аж все дымит!))