Расширитель адаптива, 1 ст.л. на табун

[Tenno Seremel]

Суть такова. Если оплачен CSS и включён адаптивный дизайн в вашем дневнике, то рекламы нет, но есть нюанс. Место под неё всё равно не освобождается. Это объявлено багофичей, а комментарий как починить, традиционно, был удалён



1. Если вы хотите, чтобы контент растянулся и занял пустое место, оставшееся от рекламы (а также заодно и разместить блок контента центрированно относительно горизонтали, а не как сейчас):

.ads-right { display: none !important; }
#page-t { width: 100% !important; }

2. Если вы вообще хотите, чтобы контент был во всю ширь, как можно было сделать на старых дизайнах:

.ads-right { display: none !important; }
#page-t { width: 100% !important; }
#page-c { width: auto !important; }
@media all and (min-width: 768px)
{
	.avatar + .post-content
	{
		box-sizing: border-box !important;
		width: calc(100% - 150px) !important;
		padding-left: 16px !important;
		padding-right: 0 !important;
	}
	#Journal .avatar + .post-content,
	#JournalComments #postsArea .avatar + .post-content
	{
		padding-left: 0 !important;
		width: auto !important;
	}
}

Comments

[pickaboo]

Для тех, кто в танке, броневике или новичок: открываете настройки вашего дизайна и копируете код в это окошко:

[Найотри]

Спасибо. Не знаю, буду ли ставить css, но учту, если что.

Вот, кстати, интересная тема: какие возможности у создателей css-дизайнов после введения адаптива. Стало больше возможностей или меньше, стоит ли менять меню или лучше оставить как есть. Было бы неплохо, если бы после правки багов кто-то знающий проанализировал всё это.

[Tenno Seremel]

Найотри, самый простой способ посмотреть, сломалось ли что или нет после изменений — в десктопном браузере включить режим адаптивного дизайна (Ctrl+Shift+M в Firefox) и медленно изменять размер окна от широкого до 320 по ширине, и смотреть что будет. Если ничто никогда друг на друга не налезает и горизонтальный скролл не появился (при условии, что вы не делаете окно меньше 320 пикселей в ширину) — всё нормально.

Опасайтесь фиксированных значений, вроде width: 800px; без указания max-width. Т.е. width: 800px; max-width: 100%; В противном случае на маленьком экране они вылезут за пределы дизайна и появится горизонтальный скролл.

[Victory_Day]

Это объявлено багофичей, а комментарий как починить, традиционно, был удалён ¯\_(ツ_/¯
таким макаром нам и пост удалят XDD

[Tenno Seremel]

Victory_Day, после того, как все код скопируют, будет поздно

[Найотри]

Tenno Seremel, спасибо.

Victory_Day, пусть все желающие его себе репостнут.

[Tenno Seremel]

Тут: #page-c { width: auto !improtant; }
Должно быть: #page-c { width: auto !important; }

Опечатка была. Если кто репостил — поправьте у себя.

Пост уже поправлен.

[Sky Butterfly]

Перевела свой дизайн в адаптивный, убрала ограничение ширины - дневник растянулся на всю ширину. Что я делаю не так?

[Tenno Seremel]

Sky Butterfly, первый код растягивает только на размер блока рекламы. Второй — на всю ширину. Какой вариант нужен?

[Sky Butterfly]

Tenno Seremel, я о том, что мне наоборот никакой код не понадобился, только всё та же галочка "растягивать дневник по ширине".

[pickaboo]

А ларчик просто открывался
Tenno Seremel, можешь поднять эту инфу в пост?

[pickaboo]

Оказывается, у меня стояла галочка в "растягивать по ширине". Но ничего не растягивалось, пока код не поставила

[Sky Butterfly]

pickaboo, может до этого в коде было ограничение ширины? Пользовательский CSS приоритетной этой галочки.

[Tenno Seremel]

pickaboo, у меня эта галка не работает

Однако, там ShiroMokona, что в Избранном что-то растягивает контент и он не влезает. Пока поймать не могу — у меня всё влезает. Если удастся выловить — код можно будет обновить. Хотя я подозреваю, что там какой-нибудь толстый iframe или ещё что-нибудь этакое без max-width у кого-то из ПЧ…

[pickaboo]

Sky Butterfly, до этого никакого кода не было. Я и сейчас чего-то нахимичила с бесплатником из каталога, добавив коды- делать с нуля пока времени нет.

[Tenno Seremel]

Интересные там стили внутри Если ширина не менее 768, то вместо использования calc() чтобы высчитать ширину блока с контентом, там используется размер в процентах. Но зачем…

Пришлось второй стиль обновлять (см. далее). Интересно, нужен ли будет он первому…

ShiroMokona, возможно, это тот баг, который у тебя всплывал, но это не точно

@media all and (min-width: 768px)
{
	.avatar + .post-content
	{
		box-sizing: border-box !important;
		width: calc(100% - 150px) !important;
		padding-left: 16px !important;
		padding-right: 0 !important;
	}
	#Journal .avatar + .post-content,
	#JournalComments #postsArea .avatar + .post-content
	{
		padding-left: 0 !important;
		width: auto !important;
	}
}

Костылестроение на марше… Было бы здорово, если бы настройка растягивания дневника всё-таки работала, а не так

[ShiroMokona]

Tenno Seremel,
Я бы сказала что похоже.
Но у меня временный перерыв в экспериментах, доэкспериментировалась до того, что надо все чистить по новой, а я к этому морально не готова.

[Tenno Seremel]

ShiroMokona, моё дело рассказать, а там уж… Никуда не торопимся, вроде А может (я надеюсь) дайри сами починят и не придётся костыли ваять.

[ShiroMokona]

Tenno Seremel,
Хотя бы часть устаканится, а то опять ощущение, что правила меняются по ходу пьесы.

[Tenno Seremel]

ShiroMokona, так и есть

[nemv]

Tenno Seremel, а есть способ не увеличивать ширину блока с контентом до 100%, но выровнять его по центру?

[Tenno Seremel]

nemv, первый код вытягивает не до 100%, а на размер, который занимает реклама. Но если даже такого увеличения не хочется, то можно вместо того кода как-то так попробовать:

#page-t
{
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.ads-right
{
	display: none !important;
}

[nemv]

Tenno Seremel, спасибо!
Вот никак не запомню все варианты, которые выравнивание делают

[Tenno Seremel]

nemv, просто это ещё зависит от используемого layout'а (разные значения свойства display, по сути, но не только; каждый в чём-то калечный). Там был float, который ведёт себя по особенному, поэтому его проще выкинуть, всё равно блок справа от него (с рекламой) нам не нужен — с оплаченным CSS её нет.