Beiträge von FunnyGirl im Thema „Anzeige in der Boxenvorschau HÖHE nicht gleichmäßig.“

FunnyGirl · 25. Februar 2020

So jetzt sieht es bei mir auch super aus.

Zweispaltig :

Dreispaltig:

und im Dashboard Ungelesene News :

Folgender CSS nutze ich dazu :

CSS

@include screen-md-up {

    .containerBoxList.doubleColumned > li {
        padding: 10px !important;
    }
    .containerBoxList.doubleColumned .messageContent {
        padding: 10px;
    }
    .containerBoxList.doubleColumned .messageContent .containerHeadline {
        min-height: 60px;
    }
    .containerBoxList.doubleColumned .messageContent .messageBody.htmlContent {
        min-height: 135px;
        margin-top: 0;
    }
}
@include screen-md-up {

    .containerBoxList.tripleColumned > li {
        padding: 10px !important;
    }
    .containerBoxList.tripleColumned .messageContent {
        padding: 10px;
    }
    .containerBoxList.tripleColumned .messageContent .containerHeadline {
        min-height: 60px;
    }
    .containerBoxList.tripleColumned .messageContent .messageBody.htmlContent {
        min-height: 135px;
        margin-top: 0;
    }
}
     /* Newslist-Container */
    .newsList.messageList.containerBoxList.tripleColumned,
    .newsList.messageList.containerBoxList.doubleColumned{
        margin-left: -10px;
    }
article.news:not(.ignoredUserMessage), article.news > div > section {
    margin-right: -10px;
}
.news > div.messageContent > div > div:not(.newsDateBadge) {
    margin-left: -10px;
}

Alles anzeigen

mg

FunnyGirl · 25. Februar 2020

Hi Mr.Stone bei deinem Code ist etwas nicht ganz ok

Das kommt da raus beim Einbau.

Danke trotzdem dafür, aber ich lasse es so wie ich es bei mir ausgetüftelt habe.

mg H.B.

FunnyGirl · 25. Februar 2020

Hi Mr.Stone

Danke das du sofort helfen wolltest.

Habe die Lösung dazu wie man jetzt zwei und dreispaltige News direkt mit CSS kombinieren kann.

So sieht das dann als Dreispaltig aus :

Folgender CSS-Code nutze ich für zwei und dreispaltig

CSS

@include screen-md-up {

    .containerBoxList.doubleColumned > li {
        padding: 10px !important;
    }
    .containerBoxList.doubleColumned .messageContent {
        padding: 10px;
    }
    .containerBoxList.doubleColumned .messageContent .containerHeadline {
        min-height: 60px;
    }
    .containerBoxList.doubleColumned .messageContent .messageBody.htmlContent {
        min-height: 135px;
        margin-top: 0;
    }
}
@include screen-md-up {

    .containerBoxList.tripleColumned > li {
        padding: 10px !important;
    }
    .containerBoxList.tripleColumned .messageContent {
        padding: 10px;
    }
    .containerBoxList.tripleColumned .messageContent .containerHeadline {
        min-height: 60px;
    }
    .containerBoxList.tripleColumned .messageContent .messageBody.htmlContent {
        min-height: 135px;
        margin-top: 0;
    }
}

Alles anzeigen

Das die Höhe bei den Ungelesenen News gleichbleibt nutze ich immer die gleiche Größe der Vorschau-Bilder wie z.B. 200x200px

Dadurch entfällt ein weiterer CSS-Code.

mg H.B.

FunnyGirl · 24. Februar 2020

Hallo Mr.Stone zweispaltig passt das ja super.

Sobald man aber dreispaltig der News wählt kleben die Boxen wieder zusammen .

Hast du dazu eine Lösung für 3-spaltige News ???

FunnyGirl · 14. Februar 2020

Ich benutze diesen Code

Code

.htmlContent > :last-child, .messageBody > .messageText > :last-child, .messageSignature > div > :last-child, .redactor-layer > :last-child {
            min-height: 110px;
}
    .messageList:not(.messageReducedList) > li .message {
        border-right: 1px solid rgb(210, 210, 210);
}

Danke Idefix für den Tipp

mg H.B.

Beiträge von FunnyGirl im Thema „Anzeige in der Boxenvorschau HÖHE nicht gleichmäßig.“

Anzeige in der Boxenvorschau HÖHE nicht gleichmäßig.

Anzeige in der Boxenvorschau HÖHE nicht gleichmäßig.

Anzeige in der Boxenvorschau HÖHE nicht gleichmäßig.

Anzeige in der Boxenvorschau HÖHE nicht gleichmäßig.

Anzeige in der Boxenvorschau HÖHE nicht gleichmäßig.

Informationen

Support

Über uns