Решено Смещение баннера

[Extazzy1]

Приветствую. Сделал баннер, загрузил на фотохостинг и вставил в код ссылку. Столкнулся с проблемой, баннер сместился в правую сторону.

Скриншот с моего форума:


То как должно выглядеть:


Код моего баннера:

.owner {
background: url(https://i.postimg.cc/WbcpLczz/owner.png);
width: 169px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: inline-flex;
}

Подскажите пожалуйста, как решить это.

 

[pikamonov]

OFFTOP

Вот такому человеку даже хочется помочь. Показал, грамотно описал, нормально назвал тему, и даже в правильном разделе создал тему!

Попробуйте этот код;

Спойлер: код

.owner {
    background: url('https://i.postimg.cc/WbcpLczz/owner.png') no-repeat center / cover;
    width: 169px;
    height: 35px;
    font-size: 0px;
    border: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
}

 

[Extazzy1]

OFFTOP

Вот такому человеку даже хочется помочь. Показал, грамотно описал, нормально назвал тему, и даже в правильном разделе создал тему!

Попробуйте этот код;

Спойлер: код

.owner {
    background: url('https://i.postimg.cc/WbcpLczz/owner.png') no-repeat center / cover;
    width: 169px;
    height: 35px;
    font-size: 0px;
    border: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
}

Спасибо.
Вставил код, не помогло почему-то



(Если что хостинг не been, такую хрень не использую).
Из-за настроек стиля может быть такое? Может там что-нибудь настроить?

 

[Extazzy1]

Решено. Спасибо за помощь

 

[pikamonov]

проблема оказалась не в баннере, а верстке xf. на мобилках баннер некорректно стоял внутри .message-userDetails, а на пк выходил за пределы колонки автора

Спойлер: исправление мобайл верстки

@media (max-width: 650px) {
    .message-userDetails:has(.message-userBanner.owner) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .message-userBanner.owner {
        display: block !important;
        flex: 0 0 auto;
        margin: 4px 0 0 !important;
        align-self: flex-start;
        clear: both;
    }
}

Спойлер: увеличение колонки

@media (min-width: (@xf-messageSingleColumnWidth + 1px)) {

    .message:not(.message--simple):not(.message--quickReply)
    .message-cell.message-cell--user {
        flex: 0 0 205px !important;
        width: 205px !important;
        max-width: 205px;
        box-sizing: border-box;
    }
}