-
AuthorPosts
-
March 28, 2017 at 11:20 am #768045
Hi,
please have a look at http://neu.dr-kueblbeck.de/ again.
There are three columns with iconboxes inside (“Prophylaxe, Zahnerhalt, Zahnersatz”). First column is set to “equal height” but the don’t have equal height, if I narrow the the window size.
Could please give some good advice?
Thanks
KarstenPS: Feel free to reply in german if you want to.
March 31, 2017 at 4:29 pm #770052Hey ichmusshierweg,
verwende diesen Code im Quick CSS Feld:
.iconbox_content { height: 315px; }
und passe entsprechend an.
Gruß,
AndyApril 3, 2017 at 3:59 pm #771198Servus Andy,
das ist aber leider völlig unbefriedigend. Damit das bei verschiedenen Breiten irgendwie passabel aussieht, müsste ich das entsprechen für x-verschiedenen Breiten in dem media-queries hinterlegen.
Wieso funktiniert denn die eqal-height Funktion an dieser Stelle nicht? An anderer Stelle klappt’s doch. Das wäre exakt, was ich brauche.
Lässt sich das irgendwie “richten”?
Danke
KarstenApril 3, 2017 at 9:59 pm #771370ich habe da mal was konstruiert, was wohl so nicht vorgesehen ist für Enfold.
https://webers-testseite.de/kokon/iconboxes/
den Iconsatz habe ich nicht aber mal die Texte so eingeführt wie bei dir.
Wenn das so gefällt, dann kann ich dir sagen wie es hinzubiegen ist.April 4, 2017 at 11:05 am #771652Servus Guenni,
das macht genau das was ich mir vorstellen würde. Da wäre ich dankbar, wenn Du mir auf die Sprünge helfen könntest.
Vielen Dank
KarstenPS:
Wobei der simpelste Weg ja nach wie vor die “Equal height Funktion” von Enfold wäre – die an dieser Stelle offensichtlich nicht funktioniert.April 4, 2017 at 12:43 pm #771710Doch das funktioniert :
Die Equal Height gilt ja für den Surrounding container also für die Column nicht für den Content. Der Content war es aber der den Hintergrund bekam beim Anlegen als top boxed content with borders.
Was also gemacht werden musste war: dieses Styling löschen, und es der Column zuordnen.
Um das mit dem Aussehen hinzubekommen – geben wir also nachher der Column diese Eigenschaften.Das Setup kann so bleiben denke ich wie du es gemacht hast.
Die Columns bitte in eine Color-Section und dieser Color-Section diese Klasse zuordnen: spezial-icon-boxWichtig: damit die Buttons unten auf einer Höhe und äquidistant zum Boden bleiben – nicht in das Textfeld der Iconbox – sondern als einzelnen Button zum 1/3 Container hinzufügen.
Bild klicken um zu vergrößern:
Alles andere ist dann nur noch verschieben der Inhalte:
.spezial-icon-box .av_one_third { border: 2px solid #eee; border-radius: 5px !important; box-shadow: 3px 3px 5px #ddd; padding: 20px; } .spezial-icon-box .iconbox_icon.heading-color { display: inline-block !important; left: 50% !important; margin: 0 !important; position: absolute !important; top: -70px !important; transform: translate(-50%); } .spezial-icon-box .iconbox_top .iconbox_content { background: inherit !important; box-shadow: none; padding: 0 15px 20px; } #top .spezial-icon-box .iconbox_top { margin-bottom: 30px; } .spezial-icon-box .iconbox h { padding-top: 10px !important; } .spezial-icon-box .iconbox + .avia-button-wrap { bottom: 0 !important; left: 50%; padding-bottom: 20px; position: absolute; transform: translate(-50%); } @media only screen and (max-width: 767px) { .spezial-icon-box .flex_column { margin: 30px 0 !important; } }
unten der Code ist um den Abstand dann der Columns zu gewähren, wenn die responsiv auf 100% Breite zurückfallen.
April 4, 2017 at 12:52 pm #771723@Guenni007
Vielen Dank Guenni! Bei uns im Kriesi Team bist du bereits bekannt als unser geheimer Superheld!Gruß,
AndyApril 4, 2017 at 3:13 pm #771811Offtopic:
wie gesagt – reiner Eigennutz. Durch die Fragen bin ich gezwungen über die Machbarkeit nachzudenken.
Das hilft mir weiter, mich schnell einzuarbeiten.April 5, 2017 at 5:59 pm #772701Danke @Guenni007, ich habe den Inhalt im private content weitergeleitet.
Gruß,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.