Ich weiß auch nicht, wieso es nicht angezeigt wird.
Hier ein Beispiel von Food Spring: https://www.foodspring.de/fitn…oko-muesli-muffins-rezept
Auf ihrer Webseite wird es angezeigt.
Beiträge von SpeedHero
-
-
Hallo,
habe noch eine Frage
leider werden mir die "Divi icon Codes" nicht angezeigt.
Ich weiß leider nicht, wieso diese nicht angezeigt werden.
Was mache ich falsch?
Hier ist meine Version: https://jsfiddle.net/o7Lr41fv/1/#&togetherjs=Vhu29tkUGF
Danke für Hilfe.
Manu
-
So sieht es bei mir aus: https://jsfiddle.net/ukLc7w1e/1/
-
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
-
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 & 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