Beiträge von SpeedHero

    Hier ist der Code von mir:


    .teaser .teaser-content {

    padding: 1rem .5rem 1rem .5rem;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 100%;

    border: 1.5px solid #e2e2e2;

    border-top: 0;

    }


    .teaser .tag {

    line-height: 1.6;

    font-size: .625rem;

    border-radius: .1875rem;

    padding: .25rem .5rem .25rem .5rem;

    top: calc(-1 * ((.75rem + .625rem) / 2));

    position: absolute;

    text-transform: uppercase;

    background: #ffea8a

    }


    .teaser p {

    margin: auto;

    line-height: 1.5;

    font-size: 18px;

    font-family: "Brandon Text Medium", Helvetica, Verdana, Arial, sans-serif;

    font-weight: normal;

    }


    .teaser a {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 100%;

    width: 100%;

    text-align: center;

    text-decoration: none;

    }


    .teaser img {

    flex-shrink: 0;

    width: 100%;

    display: block;

    max-width: 100%;

    max-height: 100%;

    height: auto;

    }


    .mag--teaser-wrapper .teaser {

    margin-bottom: 1rem;

    padding: 0rem .5rem 0rem .5rem

    }


    .grid-md-3 {

    max-width: 25%;

    flex: 0 0 25%;

    width: 100%

    min-heidht: 1px;

    }


    .grid-row {

    margin-left: -16px;

    margin:right: -16px;

    width: calc(100% + 32px);

    display: flex;

    flex-wrap: wrap;

    }


    .emotion--container.emotion--mode-rows .emotion--element {

    position: relative;

    top: 0;

    left: 0;

    float: left;

    vertical-align: tio;

    padding-left: 1rem;

    padding-bottom: 1rem;

    margin-left: inherit;

    }



    Im Anhang ein Bild, wie es jetzt bei mir aussieht.

    Bekomme es leider nicht hin :(

    Dateien

    • test.png

      (730,25 kB, 0 Mal heruntergeladen)

    Hallo zusammen,


    bin leider noch ein Anfänger und lerne gerade mit HTML und CSS zu arbeiten.


    Ich wollte den Rezeptkasten von springlane nachbauen. Zwar habe ich das irgendwie hinbekommen, aber nicht ganz.

    Leider weiß ich nicht, was ich falsch mache.


    Link zum Rezept-Kasten: https://www.springlane.de/prod…hochleistungsmixer-942900


    Folgenden Code habe ich in der .css Datei hinterlegt:


    .mag--teaser-wrapper .teaser {margin-bottom: 16px; padding: 0px 8px 0px 8px; max-width: 25%; flex: 0 0 25%;}

    .teaser .teaser-content {padding: 1rem .5rem 1rem .5rem; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border: 1.5px solid #e2e2e2; border-top: 0;}

    .teaser a {display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; text-align: center; text-decoration: none;}

    .teaser .tag {line-height: 1.6; font-size: .625rem; border-radius: .1875rem; padding: .25rem .5rem .25rem .5rem; top: calc(-1 * ((.75rem + .625rem) / 2)); position: absolute; text-transform: uppercase; background: #ffea8a;}

    .teaser img {flex-shrink: 0; width: 100%;} .magazine--teaser {text-align: center;}

    .grid-container {width: 100%; margin-left: auto; margin-right: auto; float: none; padding-left: 16px; padding-right: 16px; max-width: 70rem;}

    .grid-row {margin-left: -16px; margin-right: -16px; width: calc(100% + 32px);}


    Diesen Code habe ich bei mir im HTML eingefügt:

    <div class="grid-row mag--teaser-wrapper grid_wrapper"><div class="grid-6 grid-md-3 teaser" data-wp-post-id="81570"><a href="https://www.springlane.de/magazin/rezeptideen/klassisches-basilikumpesto/"><img src="https://d12xickik43a9a.cloudfront.net/images/magazine/de/M81583-Shootings_Magazin_2018_08_09_Basilikum_Pesto-1-650x642-Q75-433x433.jpg"><div class="teaser-content"><span class="tag">Brotaufstrich</span><p>Wie beim Lieblings-Italiener: Klassisches Basilikumpesto</p></div></a></div><div class="grid-6 grid-md-3 teaser" data-wp-post-id="32647"><a href="https://www.springlane.de/magazin/rezeptideen/ananas-mango-smoothie-kokosmilch/"><img src="https://d12xickik43a9a.cloudfront.net/images/magazine/de/M33228-Ananas-Mango-Smoothie-mit-Kokosmilch_featured-650x642-Q75-433x433.jpg"><div class="teaser-content"><span class="tag">Clean</span><p>Karibischer Ananas-Mango-Smoothie mit Kokosmilch</p></div></a></div><div class="grid-6 grid-md-3 teaser" data-wp-post-id="7395"><a href="https://www.springlane.de/magazin/rezeptideen/selbstgemachte-erdnussbutter/"><img src="https://d12xickik43a9a.cloudfront.net/images/magazine/de/M86611-Erdnussbutter-selber-machen_4_7395-650x642-Q75-433x433.jpg"><div class="teaser-content"><span class="tag">Grundrezepte</span><p>Erdnussbutter selber machen</p></div></a></div><div class="grid-6 grid-md-3 teaser" data-wp-post-id="63976"><a href="https://www.springlane.de/magazin/rezeptideen/himbeer-kokos-smoothie-bowl/"><img src="https://d12xickik43a9a.cloudfront.net/images/magazine/de/M64743-Himbeer-Kokos-Smothie-Bowl_featured-650x642-Q75-433x433.jpg"><div class="teaser-content"><span class="tag">Shakes &amp; Smoothies</span><p>Dein Schüsselglück: Himbeer-Kokos-Smoothie-Bowl</p></div></a></div></div>


    Bei mir werden die Rezept-Kasten untereinander dargestellt und nicht responsive.


    Wäre sehr dankbar für Hilfe.


    Beste Grüße

    Manu

    Dateien

    • Unbenannt.png

      (849,53 kB, 2 Mal heruntergeladen, zuletzt: )