Forums / Cotonti / Skins / Как красиво поступить с "лишними" буквами и словами ?

Kort
#47145 2023-09-28 08:09

Для начала закомментируй блоки .forum_date, .admin и div_thanks. Вернешься к ним потом.

Правила для div.about:

.about {
 background-color: #2E3342;
 color: #D2E0A4ff;
 padding: 1rem;
 flex: 0 0 15rem;
}

Правила для div.message:

.message {
 background-color: #2E3342;
 padding: 1rem;
 flex-grow: 1;
}

Текст в блоке .about теперь будет спокойно переноситься. Почему не переносился раньше -- почитай про flex и посмотри на свои начальные правила.

У родителя достаточно будет:

.forum_post {
	display: flex;
	background-color: #2F3342;
	border-color: #3f4f5f;
	border-radius: 20px 8px 8px 0;
	box-shadow: 5px 3px 15px #00000080;
	opacity: 1.0;
	transition-duration: 0.5s;
	transition-property: box-shadow, opacity;
	transition: 200ms;
	margin: 30px 0;
}

.forum-date и .admin проще перенести в блок .message. .div_thanks -- в .about. Как вариант -- использовать отдельные рядные flex-блоки для [div.forum-date div.admin], [div.about div.message] и [div.thanks]. Но если посидеть-подумать, можно и с текущей разметкой справиться)

P.S. color для .about указан с ошибкой

SED.by - создание сайтов, разработка плагинов и тем для Котонти
This post was edited by Kort (2023-09-28 08:23, 7 months ago)

This topic is locked, new posts are not allowed.