Embedded Content nebeneinander im Beitrag anzeigen

  • Affected Version
    WoltLab Suite 5.4

    Ich scheitere gerade daran das CSS für .embeddedContent so anzupassen, dass die umgewandelten Links nicht ständig untereinander, sondern nebeneinander (auffüllend) dargestellt wird. Es sieht einfach unschön aus, wenn es so einen große ungenutzte Fläche in einem Beitrag entsteht.


    Probiert habe ich es bisher mit


    Code
    article.articleEmbeddedEntry.embeddedContent {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    Als Beispiel poste ich ein paar Links (ich hoffe er wandelt hier alles um :P :(


    Iterate faster, innovate together
    Our DevOps platform is a single application for unparalleled collaboration, visibility, and development velocity.
    about.gitlab.com


    Bitbucket | The Git solution for professional teams
    Collaborate on code with inline comments and pull requests. Manage and share your Git repositories to build and ship software, as a team.
    bitbucket.org


    GitHub: Where the world builds software
    GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories,…
    github.com

  • Test

    Google

    Google
    Bereit für eine Herausforderung? Hilf Lucky dabei, den Sieg in den Spielen der Insel der Champions zu erringen! #GoogleDoodle
    www.google.com

    Amazon

    Amazon.com. Spend less. Smile more.
    Free shipping on millions of items. Get the best of Shopping and Entertainment with Prime. Enjoy low prices and great deals on the largest selection of…
    www.amazon.com

    Github

    GitHub: Where the world builds software
    GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories,…
    www.github.com

    Edited once, last by eazY_ ().

  • Folgender CSS Code um die Anzeige wie abgebildet bei Links wieder zu geben:


    Code
    .unfurlUrlCard {
        max-width: 49%;
        margin-right: 1%;
        float: left;
    }


    für Artikel sollte die Klasse genügen: .articleEmbeddedEntry die kannst du oben nach .unfurlURLCard mit Komma als Trennung anhängen, so: .unfurlUrlCard, .articleEmbeddedEntry {


    Es sind noch weitere Klassen für andere interne Links notwendig, wenn du möchtest dass dies beispielsweise auch bei Links zu Threads, Posts, Filebase Einträgen usw. passiert. Mit .embeddedContent deckst du alle internen Links auf einmal ab.


    Beste Grüße


    Edit, ich habe noch ein min-width eingefügt um so etwas zu verhindern:

    bezogen auf den Text "Github" oben rechts, befindet sich zwischen den Links nämlich Text, wird dieser die Lücken auffüllen, also habe ich es 2 Spaltig aufgeteilt und auf min-width 49% gesetzt, um keine Lücken zu ermöglichen. (49% um einen kleinen Abstand zwischen den Embedds zu ermöglichen)

    Dann passt das auch mit dem Text:


    Final also:

    Code
    @media screen and (min-width: 768px) { 
    .unfurlUrlCard, .embeddedContent {
        max-width: 49%;
        min-width: 49%;
        margin-right: 1%;
        float: left;
    }
    }

    Edited 5 times, last by eazY_ ().

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!