-
Posts
-
Hello,
please have a look at the page http://00498-003.htz-cs06.clickstorm.de/neurochirurgie-west-leer/ and then a little further down (dark photo in the background) at the “Icon/Flipbox Grid”. There is a very large gap between the first and second line, which I cannot make smaller. I have already tried a few things under “Style > Grid Style”. The gap should be smaller, maybe only half as large, and so that everything can be read easily after rotation.
best wishes,
MartinHey Martin,
I’m not sure that I fully understand your intentions, could you post a screenshot highlighting the space that you would like to remove please?
Best regards,
Rikardon that flip box with the image – have you set up a min-height option?
on Element itself and Content – Grid Stylingand default (huge) padding is used on two containers.
.avia-icongrid .av-icon-cell-item .avia-icongrid-flipback { padding: 4em 3em; } .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-front .avia-icongrid-inner, .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-flipback .avia-icongrid-inner { padding: 4em 3em; }Hello Guenni,
no, it is not set anywhere. There are no special height specifications, at least I haven’t found anything (and I’ve been looking for a long time). I saved your code in Quick CSS, but that didn’t make any difference.
best regards,
Martin
——————————-
Hallo Guenni,nein da ist überall nicht eingestellt. Es gibt keine besonderen Höhenangaben, ich habe zumindest nichts gefunden (und ich habe schon lange gesucht). Deinen Code habe ich ins Quick CSS gespeichert, das hatte keine Änderung gebracht.
viele Grüße,
Martinnicht sichern sondern die default werte ändern. (verkleinern)
kannst du mal das Merging für css abstellen. Dann kann ich das leichter inspizieren.
PS: aber alle Höhen richten sich einheitlich nach dem größten Content. Und mit den o.a. paddings – ist das nunmal bei dem article mit dem Bild ca. 400px
Wenn alle Iconboxes bilder haben wird es sich nach dem dann größten Content richten.
Hi,
Thank you for the update.
You can try this css code to decrease the space between the rows:
.avia-icongrid .av-icon-cell-item .avia-icongrid-flipback { padding: 10px 3em; } .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-front .avia-icongrid-inner, .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-flipback .avia-icongrid-inner { padding: 10px 3em; }Best regards,
IsmaelHowever, the real reason for the appearance is that all boxes have the same height. This height is then determined by the one box with the image with the corresponding padding. We then have the same height for all the others. This makes it look like a large distance. If you create the seventh box with the same content as above, you will see that the distance is not that big.
With that setting from Ismael you can see :
eventuell gehst Du bei diesem speziellen Iconbox Layout dazu über, das als Grid Layout zu gestallten; denn geh mal die responsiven Weiten des Elementes durch. Irgendwann wird es zu schmal.
Was ich meine ( jetzt mal nur für diesen Fall):
#top.postid-5503 #av-layout-grid-2 .avia-icongrid { margin: 0; padding: 0; gap: 0px; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); grid-auto-flow: row; } #top.postid-5503 #av-layout-grid-2 .avia-icongrid .av-icon-cell-item .avia-icongrid-flipback { padding: 0; } #top.postid-5503 #av-layout-grid-2 .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-front .avia-icongrid-inner, #top.postid-5503 #av-layout-grid-2 .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-flipback .avia-icongrid-inner { padding: 10px 3em; }Wenn das Layout mit seinem Inhalt dann steht , könnte man noch einstellen das die letzte Zeile sich unten zentriert.
Hi guys,
I quickly inserted Ismael’s code and the result was immediately convincing. Thank you, that’s how it should look!
best regards,
Martin
- You must be logged in to reply to this topic.