Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #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
    Karsten

    PS: Feel free to reply in german if you want to.

    #770052

    Hey ichmusshierweg,

    verwende diesen Code im Quick CSS Feld:

    .iconbox_content {
    height: 315px;
    }

    und passe entsprechend an.

    Gruß,
    Andy

    #771198

    Servus 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
    Karsten

    #771370

    ich 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.

    #771652

    Servus 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
    Karsten

    PS:
    Wobei der simpelste Weg ja nach wie vor die “Equal height Funktion” von Enfold wäre – die an dieser Stelle offensichtlich nicht funktioniert.

    #771710

    Doch 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-box

    Wichtig: 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.

    #771723

    @Guenni007
    Vielen Dank Guenni! Bei uns im Kriesi Team bist du bereits bekannt als unser geheimer Superheld!

    Gruß,
    Andy

    #771811

    Offtopic:

    wie gesagt – reiner Eigennutz. Durch die Fragen bin ich gezwungen über die Machbarkeit nachzudenken.
    Das hilft mir weiter, mich schnell einzuarbeiten.

    #772701

    Danke @Guenni007, ich habe den Inhalt im private content weitergeleitet.

    Gruß,
    Andy

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.