Okay
  Public Ticket #3746298
Flipboxes on mobile
Closed

Comments

  •  11
    decybel started the conversation

    Hi there, i have those flipboxes working perfectly on laptop but as i cannot hover on images, text doesn't reveal when using my smartphone.

    What should i do to make it clear even on tablets and smartphones?


    Thanks for your precious help!

    Attached files:  Capture flipbox compo.PNG

  •  2,966
    Andrew replied

    Hi again,

    Thank you for getting back to us.

    This is by design as the hover function does not exist for mobile devices. Unfortunately, we have no way of showing the flip function on mobile devices, the users would have to touch the flip boxes to see the content on the back.

    My apologies for any inconvenience caused.

    Regards,

  •  11
    decybel replied

    I understand, i'll find a way...

    But, by chance, do you have some feature that would do the job?

  •  2,966
    Andrew replied

    Hi again,

    Thank you for getting back to us.

    I would recommend creating another row that will have an image above the text, then you can use the responsive options to hide the columns with the flip boxes on mobile and hide the new column on larger screens https://themenectar.com/docs/salient/page-builder-columns/#hide-on-device

    Try this and let us know if this works for you.

    Best regards,

  •  11
    decybel replied

    Hello Andrew, sorry for the late answer...

    I've found a way to explain on tablet and smartphone mode that you have to touch the flipbox to reveal.
    I have added a row with a picture including the text "touchez pour révéler".

    To be sure that the text would appear i put a divider on smartphone and tablet.
    It works just fine on smartphone but on my tablet, whatever the divider height, text doesn't show.
    I can see it on WPbakery (captue) but it has no effect on my device (captureipad)...

    Attached files:  Capture.JPG
      captureipad.jpeg

  •  8,856
    Tahir replied

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (max-width: 1024px) and (min-width: 691px) {
        .column-image-bg-wrap.viewport-tablet, .row-bg.viewport-tablet {
            display: block !important;
        }
    }
    

    Thanks


    ThemeNectar Support Team 

  •  11
    decybel replied

    is it okay this way?

    Attached files:  Capture d’écran code css.png

  •  8,856
    Tahir replied

    Yes, its correct. 

    Best 


    ThemeNectar Support Team 

  •  11
    decybel replied

    then i guess it's something else as i still cannot see the chenges i make on my page "composition" with WP bakery on my tablet.

    https://www.cypriendelaye.fr/composition/

    Thank for your help

  •  8,856
    Tahir replied

    Which Tablet resolution are you checking this in ?.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (max-width: 1180px) and (orientation:landscape) and (min-width: 691px) {
        .column-image-bg-wrap.viewport-tablet, .row-bg.viewport-tablet {
            display: block !important;
        }
    }
    

    Thanks


    ThemeNectar Support Team 

  •  11
    decybel replied

    based on what i find on the web, my ipaad resolution is 2732 x 2048.

    I try the new code and get back to you asap

    Thanks!