[Magic Berry]

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

Заранее спасибо.

@темы: diaryCSS, основные блоки, платный сервис, Дизайн

Comments

[resurrected smithson]

попробуйте:
чтобы скрыть контейнер с аватаром:

.postContent .avatar{ display:none; }

чтобы часть с реальным текстом поста была во всю ширину:

.item .post-content{ width: 100%; }

[resurrected smithson]

а чтобы дневник растянуть на весь экран, попробуйте:

.col-md-9, .content .main {
    width: 100%;
}

[Magic Berry]

resurrected smithson, спасибо!
Последний код сделает блок поста шириной во весь экран? Мне бы не это, не растянуть его, а именно подвинуть.

[resurrected smithson]

Magic Berry, подвинуть в центр, при этом не меняя его ширины?

[Magic Berry]

resurrected smithson, да

[Magic Berry]

resurrected smithson, коды для аватара не сработали О___О

[Тайя.]

Мне нужно подвинуть центр!
margin: 0 auto не работает((

[Magic Berry]

Тайя., а как вы сделали прозрачность и разделение постов на отдельные, а не сплошным полотном? *___*

[Тайя.]

Magic Berry, попробуйте надпись убрать вот так:

.post-list .item .avatar {display:none;}

как вы сделали прозрачность и разделение постов на отдельные, а не сплошным полотном?

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


.post-list .item {background: rgba(202, 194, 247, 0.85); border-radius: 5px; margin-bottom: 40px !important;}
background: rgba(202, 194, 247, 0.85) - цвет поста в формате rgba, 0.85 - степень прозрачности,
margin-bottom: 40px !important - это как раз отступ от постов в 40 пикселей.

[resurrected smithson]

Magic Berry,
по идее сработает вот такой хак:


.col-md-9, .content .main {
margin: 0 14%;
}


но это красиво на экране шириной (max-width: 1399px) and (min-width: 1200px),а на экранах побольше может быть так себе
т.е. ради адаптивности там разные правила для ширины заданы в зависимости от ширины экрана устройства. а потому марджин хорошо бы корректировать. точно не знаю, но по идее если вы добавите в свой дизайн скопипащенные правила оттуда и немного их подкорректируете под свою ширину экрана и под все варианты экранов, на которых свой дневник смотрите (подобрав точный марджин на свой вкус - чтоб не сильно косо было: у меня это 14 и 11 получилось), должно проканать.

например, кроме вот того правила выше, можно добавить такие:


@media (max-width: 1399px) and (min-width: 1200px)
.content .main {
width: 77%; /* это правило из дайри стайлшита, можно оставить */
margin: 0 11%;
}

@media (min-width: 992px)
.col-md-9, .content .main {
width: 75%;
margin: 0 14%;
}


если на вашем экране что-то косо, можно подкорректировать проценты марджину (и ширину тоже можно, мало ли)

[Magic Berry]

Тайя., о, работает, буду ковыряться, спасибо!)
Осталось найти возможности в центр сдвинуть. Я видела у кого-то по центру адаптивный, значит, способ есть)

[resurrected smithson]

Magic Berry, добавьте правилу !important перед точкой с запятой
могли и не сработать, да. я тестирую через девтулз в браузере и поправляю стайлшит дайрей напрямую мало ли как там стайлшиты сочетаются и что кого перебивает. импортант должен помочь

[Magic Berry]

resurrected smithson, Работает!
Но значит ли это, что у людей с другой шириной экранов мой дизайн будет отображаться со сдвигом?

[resurrected smithson]

Осталось найти возможности в центр сдвинуть

попробуйте что я там повыше написала) если не будет работать сразу, можно попробовать тоже !important подобавлять после каждого правила.
у меня оно все работает, потому что я прямиком в дайревом стайлшите правлю) а так может и затираться, если селектор там есть более специфический...

[resurrected smithson]

Magic Berry, чтобы на всех экранах было огонь, достаточно просто добавить все те @media штуки) это как раз надо для разных экранов. чтобы реально у себя протестировать как разные экраны реагируют, можно уменьшать окно браузера и смотреть. кажется больше они @media не добавляли, кроме этих. так что, вероятно, у всех будет ничего (разве что на совсем больших экранах покосится чутка вправо.
я тоже хотела марджин ауто сделать, но да, оно не работает. вероятно из-за ширины, но точно не скажу. верстка - не моя сильная сторона))

[Magic Berry]

resurrected smithson, поняла, буду пробовать, спасибо огромное

[resurrected smithson]

Magic Berry, вот как с этими стилями отображается на экране шириной 1920:



чуток косо, но можно подправить в
.col-md-9, .content .main {
margin: 0 12%;
}

на моем экране тогда ровно

[resurrected smithson]

вообще, вот все адаптивные настройки из того стайлшита:

@media (max-width: 767px) {
        body {background-image:none;}
        .content {padding-top: 0;}
        .content>.container#page-c {padding: 0;}
        .main>.user {padding: 34px 20px 20px 20px;}
        .post-list .item .post-content {margin-top:0}
        .postLinksBackg span {display:none}
        #vkl, #VISUALAREA {display: none;}
        #HTMLAREA {display:block !important;}
        #forTextarea #content {margin: 0 -20px; padding: 15px 20px;}
        #epigraph {width:100%}
    }
    @media (min-width: 768px) {
        .main {padding:0}
        .main>.user {padding:.9em 20px 20px;}
        #change_bg_area {float: right; padding-top: 14px;}
    }
    @media (max-width:991px) {
        .navbar .navbar-nav.navbar-left > li > a {font-size: 1em;}
    }
    @media (min-width: 992px) {
        .post-list .item, #epigraph, .formcontainer, .post-list .day-header, .header, .pagination {margin-left:-18px}
    }
    @media (min-width:1200px) and (max-width: 1399px) {
        .content .main {width: 77%;}
        .ads-right {width: 23%; padding-left: 10px;}
    }
    @media (min-width:1200px) {
        .main {padding-right:0 !important;}
        .main>.diary {padding-top:0; padding-left:10px;}
    }

[Тайя.]

resurrected smithson, о, у меня подвижка на 14% сработала! Там же .content .main 75% задан, убираешь 75% - все по центру, но блин, огромное((
Как раз 25% пополам - 12,5% и нужны.
Спасибо!

[resurrected smithson]

Тайя., рада помочь)
у самой платного css нет, но копаться в этом всем интересно)))
лично мне так все огромное и по центру как раз нравилось бы)))

[Magic Berry]

resurrected smithson, а у меня ваш дизайн сииииильно влево уехал О___о

[resurrected smithson]

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

[resurrected smithson]

Magic Berry, ...или вы про вид моего дневника? если про него, то у него там базовый дизайн со съездом влево)) я просто на нем тестировала. сохранить я это не могу)) все, что ты пишешь в браузере, затирается при обновлении страницы и в принципе видно только в этом браузере.

[resurrected smithson]

...а ваш дневник смотрится как надо) подписи под аватаром нет, все почти по центру, красиво.

[Magic Berry]

если про него, то у него там базовый дизайн со съездом влево))

а, тогда все ок) я про него)

...а ваш дневник смотрится как надо) подписи под аватаром нет, все почти по центру, красиво.

урра *___*

[Тайя.]

Так, оказывается, убрав аватарки в посте, убираешь и в комментах...
ЪУЪ
Ковыряем дальше))

[resurrected smithson]

Magic Berry, я из тех, кто облизывается на красивые дизайны, но себе не делает, потому что и так сойдет)) меня больше беспокоят чорные иконки на чорном фоне design2019.diary.ru/p218761356.htm

[resurrected smithson]

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

[Тайя.]

Мне кажется, сейчас что-то правят, потому что у меня раньше не было тоже надписи, а сейчас она появилась.
Просто в посте только надпись, а если зайти в комменты, авка и подпись, явно какие-то баги.

[resurrected smithson]

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