Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 7, 2019 at 9:29 am #1075869
    HagenWittig

    Hello everyone!

    I am using the icon grid element on our site (see link in private content area) with some content on each flipside of an icon. The standard setting of the icon grid element for small / mobile screens seems to be statically showing the front- and flipside below each other. As I do have many icons this results in a very long scroll down area on small / mobile screens. Thus, I would like to entirely hide all the flipsides as soon as the icon grid element switches from dynamic (i.e., flipping) to static mode.

    Could you please provide a CSS to achieve this?

    Thanks and best regards,

    Hagen

    March 7, 2019 at 11:42 am #1075932
    Guenni007

    try this in quick css:

    @media only screen and (max-width: 767px) {
	.avia-icongrid-flipbox li article { display: inline }
	.avia-icongrid-flipback { display: none }
}
    March 7, 2019 at 2:39 pm #1075989
    HagenWittig

    Hi Guenni007!

    I am truly delighted you answered on my question. I have already read and implemented lots of your posts! :-)

    Your CSS worked perfectly fine. Thanks a lot.

    However, I already have two follow-up question: Again on small / mobile screens only,
    – how do I reduce the vertical distance between the icons (the flipsides are hidden now), and
    – how can I get two columns (instead of just one column) of icons when the screen is rotated to landscape orientation?

    If you want to check yourself, the website is https://www.dental.one/.

    Thanks again!

    Best regards,

    Hagen

    March 7, 2019 at 3:43 pm #1076018
    Guenni007

    Danke – ich denke wir können hier mal kurz deutsch parlieren.
    die Distanz wird natürlich auch von dem Inhalt auf der Backside bestimmt, da die aber ja im responsiven Fall weg ist, kannst du das Padding dort auf weniger setzen als vorgesehen und –
    da du keine Links auf den Icons hast , kannst du auch den Cursor auf den normal Wert setzen:
    passe das Padding deinen Bedürfnissen an.

    @media only screen and (max-width: 767px) {
  .avia-icongrid-flipbox li .avia-icongrid-front .avia-icongrid-inner {
      padding: 2em 2em;
  }

  .avia-icongrid-flipbox li {
      cursor: default;
  }
}

    PS: bei der Menge an Icons hätte ich wahrscheinlich trotzdem nur 1/4 columns genommen.

    March 7, 2019 at 3:58 pm #1076026
    Guenni007

    Um nicht solch hohe Säulen zu haben wäre eventuell gut wenn du das Padding generell etwas ändern würdest – also nicht bei kleinen Screenweiten sondern global:

    .avia-icongrid-flipbox li .avia-icongrid-flipback .avia-icongrid-inner {
  padding: 10px !important;
}

    wenn du das umgesetzt hast schaue ich nochmal über die Seite.

    Edit: na mal sehen ob es was bringt – kann ich in den Developer Tools nicht so optimal simulieren.

    March 7, 2019 at 5:41 pm #1076058
    HagenWittig

    Hallo Guenni!

    Unglaublich, jeder Code ein Treffer. Alles umgesetzt. Vielen, vielen Dank!

    PS: bei der Menge an Icons hätte ich wahrscheinlich trotzdem nur 1/4 columns genommen.

    Du meinst die globale Einstellung des Icon Grid für die Anzahl der Spalten nebeneinander, richtig?

    Kann man dem Icon Grid nicht noch klarmachen, dass es, sobald die einzelnen Icons aufgrund der geringeren Bildschirmbreite eine gewisse Höhe erreicht haben, auf 4 Spalten bzw. 3 Spalten bzw. 2 Spalten bzw. 1 Spalte wechseln soll?

    Beste Grüße

    Hagen

    March 7, 2019 at 6:08 pm #1076072
    Guenni007

    Das passiert ja bei deiner Seite so bei 990px – es geht in die Zweispaltigkeit über, deshalb hast du dann auch immer eine Lücke.
    Wenn du bei 4 startest wäre das halt nicht so.

    March 7, 2019 at 6:41 pm #1076082
    Guenni007

    Du hast mich da auf eine Idee gebracht. Warum hier nicht die Weite flexibel nehmen. Ich denke da an das Flex Box ( Grid ) Modell.

    .avia-icongrid {
	display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: center;
    justify-content: center;
}

.avia-icongrid li {
    -webkit-flex: 0 1 240px;
    flex: 0 1 240px;
}

.avia-icongrid li .avia-icongrid-content {
    padding: 0 1.5em !important;
}

.avia-icongrid-numrow-5 li {
    width: 100%;
}

    dann hat man sogar mehr als 5 Säulen bei breiten Screens!

    March 7, 2019 at 7:24 pm #1076094
    Guenni007

    was gut wäre, wenn du den langen Überschriften mittels ­ Soll-trennstellen einfügen könntest, denn die brechen nicht um.
    Das kann man erzwingen, allerdings sind die Umbrüche die per css möglich sind nicht immer beliebt :lol:

    .av_icongrid_title.icongrid_title {
    hyphens: auto;
}

    gemeint ist also sowas in die Eingabe zu geben: Kosten­trans­parenz
    denn wenn du nicht so oft dort text änderst ist das doch zumutbar, die Trennungen selbst zu bestimmen . dann ist autohyphens auch nicht nötig.

    PS : bei justify-content – kannst du mal was spielen: ( center sieht dann bei dir auch nicht schlecht aus)
    da gibt es:

    • flex-start (default): items are packed toward the start line
    • flex-end: items are packed toward to end line
    • center: items are centered along the line
    • space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
    • space-around: items are evenly distributed in the line with equal space around them
    • space-evenly: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

    bitte immer auch an die -webkit- definitionen mit denken
    hier mal wie es wirkt: https://css-tricks.com/almanac/properties/j/justify-content/

    March 7, 2019 at 8:23 pm #1076106
    HagenWittig

    Lieber Guenni,

    vielen Dank schon mal für die ganzen Ideen. Ich bin leider ab sofort bis Montagmorgen offline. Werde aber am Montag all Deine Vorschläge testen. Ich melde mich dann!

    Viele Grüße

    Hagen

    March 7, 2019 at 10:02 pm #1076121
    Guenni007

    thanks
    Danke

    See here our results in comparison to default behavior:
    https://webers-testseite.de/gridflip/

    March 9, 2019 at 5:37 am #1076577
    Rikard

    Hi,

    Thanks for helping out as always @guenni007 :-)

    Please let us know if you should need any further help on the topic @hagenwittig.

    Best regards,
    Rikard

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