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.
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)...
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;
}
}
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
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,
I understand, i'll find a way...
But, by chance, do you have some feature that would do the job?
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,
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
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