Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 25, 2020 at 10:00 pm #1197868
    Zdenek

    Hi Enfold team,
    I would need your help with setting up of responsivity in icon grid.
    I would like to have two icon grid columns, which I set up following by this threat: https://kriesi.at/support/topic/new-icon-grid-flip-box-show-2-columns/
    Than I would like to have a picture in each of icon grid, which I set up following by this threat: https://kriesi.at/support/topic/flip-boxes-with-images-icon-grid-flip/

    Here you can see how I would imagine it looks: http://test.mts.academy/test-page/

    I put there own css class field and set up two columns and icon invisibility:
    .mts-flip-box-sluzby .icongrid-char {display: none !important}
    .mts-flip-box-sluzby .avia-icongrid-numrow-3 li {width: 50%;}

    But I can´t find how to make the pictures responsible for devices lower than 767px. I have tryied to use css below, but it doesn´t work for the pictures.
    @media only screen and (max-width: 767px) {
    .mts-flip-box-sluzby .avia-icongrid-numrow-3 li {
    width: 100%;
    }}

    Can you pls help me?

    Thank you,
    Zdenek

    March 28, 2020 at 1:32 pm #1198566
    Victoria

    Hey Zdeněk,

    Best regards,
    Victoria

    March 30, 2020 at 8:03 pm #1199186
    Zdenek

    Hi Victoria,
    sorry for that I was trying something and forgot to change it back. Now you can have a look.

    Thank you,
    Zdenek

    March 31, 2020 at 7:50 pm #1199498
    Victoria

    Hi Zdenek,

    For the icons, you need to have CORS enabled.
    Please refer to this: http://kriesi.at/documentation/enfold/enable-cors/

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    

@media only screen and (max-width: 989px) {
    .avia-icongrid-tooltip li .avia-icongrid-front,
    .avia-icongrid li .avia-icongrid-wrapper,
    .avia-icongrid-flipbox li .avia-icongrid-front .avia-icongrid-inner,
     .avia-icongrid-tooltip li article {
        min-height: 300px;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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