Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1360829

    Hallo, wie kann ich für alle Symbol-Boxen die gleiche Höhe definieren. Jetzt ist die Höhe angepasst an dem Inhalt.

    #1360831

    have a look here on my example page – with all css code and descriptions.
    ( Don’t know if you have set a minimum height of that section – if so – remove it )

    shiftings depends on the icon size you have choosen in your iconbox element

    https://enfold.webers-webdesign.de/iconbox/

    #1360844

    Hi,

    Thanks for sharing and for helping out @guenni007 :-)

    Best regards,
    Rikard

    #1360850

    Der Sinn dahinter ist , dass man nicht iconbox selber einfärbt und in der Höhe angleicht, sondern die columns welche diese beinhalten.
    Also lediglich die Iconfarben anpasst, und die Hintergrundfarbe dann inclusive Schattenwurf etc. durch die columns bestimmt.
    Will man das Iconbox Aussehen erhalten verschiebt man nur diese über den column Rand hinaus. Bingo.

    Und pack die Columns bitte in eine Color-Section

    PS: du musst irgendwo eine Höhe erzwungen haben:
    das brauchen wir nicht

    _____

    The idea behind this is that you do not color the iconbox itself and adjust the height, but the columns that contain them.
    So only the icon colors adjust, and the background color then inclusive shadow throw etc. by the columns determines.
    If you want to keep the iconbox look you just move it over the column border. bingo.

    #1361059

    ok – with grid layout it will work too! Grid-Layout is a bit more complex – so i do seldomly advice this
    Link1; Link2 ;)

    PS: here to – on grid-layout the pseudo-container will be part of those rules – so the got gaps etc. analogo to the visible containers.
    So if you add this to your css:

    #av_section_2 .entry-content-wrapper:before, 
    #av_section_2 .entry-content-wrapper:after{
      display:none
    }

    you can see the influence they have

    #1361091

    Hallo, vielen Dank für die Informationen!

    Habe das so gelöst:

    #av_section_2 .entry-content-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 2em;
    }
    #av_section_2 .entry-content-wrapper > div {
    width: 100%;
    margin-left: 0;
    }
    #av_section_2 .entry-content-wrapper article, #av_section_2 .entry-content-wrapper .iconbox_content {
    height: 100%;
    }
    #av_section_2 .entry-content-wrapper {
    margin-left: 0;
    }
    @media only screen and (max-width: 767px) {
    #av_section_2 .entry-content-wrapper {
    grid-auto-flow: row;
    }
    #av_section_2 .entry-content-wrapper > div, #av_section_2 .entry-content-wrapper article {
    height: auto;
    }
    }

    #1361110

    Hi,

    Great, I’m glad that you solved the problem, and thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    #1361120

    Ticket kann geschloßen werden

    #1361131

    Hi,

    Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Symbol-Box gleiche Höhe’ is closed to new replies.