-
Posts
-
Hallo, wie kann ich für alle Symbol-Boxen die gleiche Höhe definieren. Jetzt ist die Höhe angepasst an dem Inhalt.
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
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.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
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;
}
}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,
RikardHi,
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
- The topic ‘Symbol-Box gleiche Höhe’ is closed to new replies.