Flipbox don't flip on Ipad

Home Forums All Other Themes Flipbox don't flip on Ipad

This topic contains 7 replies, has 2 voices, and was last updated by  marcel.wezenberg 2 weeks, 3 days ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #129399

    marcel.wezenberg
    Participant
    • Topics: 4
    • Replies: 7
    • Total: 11
    Member since: March 8, 2019

    Hello,

    I’m using the sportsman pro theme. I tried to use the flip boxes using the SKT Builder.
    On the desktop PC with chrome or Edge they flip when the mouse is hovering over them.

    But on the ipad they don’t work. I’ve three boxes on one row. One flips when clicking it, but I can’t flip it back.
    The other two won’t flip at all.

    Please let me know to solve this.

    Kind regards,
    Marcel

    #129422

    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 21662
    • Total: 21662
    Member since: August 16, 2013

    Hi,

    Kindly show us your website URL?

    Regards,
    Dave

    #129449

    marcel.wezenberg
    Participant
    • Topics: 4
    • Replies: 7
    • Total: 11
    Member since: March 8, 2019

    Hello Dave,

    The URL is: https://www.ijgv.nl/test2/sponsoren

    Also for the backside text, I’ve difficulties to adjust the line-height.
    See the most left flipbox backside text.

    Kind regards,
    Marcel

    #129717

    marcel.wezenberg
    Participant
    • Topics: 4
    • Replies: 7
    • Total: 11
    Member since: March 8, 2019

    Hello Dave,

    Please let me if there’s a solution for the flipbox issue on the ipad.

    Thanks.

    Kind regards,
    Marcel

    #129732

    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 21662
    • Total: 21662
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    
    @media screen and (min-width:768px) and (max-width:1023px)
    .skt-builder-flipcard { height:550px;}
    .skt-builder-flipcard .skt-builder-flipcard-front, .skt-builder-flipcard .skt-builder-flipcard-back { height:auto !important; min-height:550px;}
    .skt-builder-flipcard-front-content p { margin-bottom:6px;}

    Regards,
    Dave

    #129786

    marcel.wezenberg
    Participant
    • Topics: 4
    • Replies: 7
    • Total: 11
    Member since: March 8, 2019

    Hello Dave,

    Thanks for the CSS code, indeed this improves the behave. Compared to a desktop PC, once a flipcard flipped you can’t return it to it’s default state. You’ve to click a different one. (Then the first one returns and the second one flips)
    It this the expected behave of such flipcard (on tabled)?

    I added a 4th one. (3 on a row) So I’ve two rows, those overlap. Is this a bug in the CSS somewhere?

    Kind regards,
    Marcel

    #129811

    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 21662
    • Total: 21662
    Member since: August 16, 2013

    Hi,

    Kindly use this one

    .skt-builder-block-inner.skt-builder-block-inner-301 .skt-builder-column { height:550px;}

    Regards,
    Dave

    #129822

    marcel.wezenberg
    Participant
    • Topics: 4
    • Replies: 7
    • Total: 11
    Member since: March 8, 2019

    Hello Dave,

    Sorry to bother you again, I noticed the CSS you send controls the height of the flipbox that’s fine.

    Meanwhile I found out that once I replace the icon with a picture from the media library the flipbox work better on the ipad. Even without any of the CSS code you send!

    It seems you need to click the picture to flip it. (with an icon that didn’t work)
    It would be nice if it flips already if you click within the flipbox area, not specific the picture.

    Also to return it back to it’s default state, you need to click a different flipbox. To me that’s not very handy.
    Is there a better way to return the flipbox to it’s default state. (click it again would be logic to me)

    Kind regards,
    Marcel

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

You must be logged in to reply to this topic.