How to hide arrow nav on mobile ?

Question

Hi Ajar,
How can I hide the arrow when we watch a flipbook on a mobile please ?

Best regards

Answer 1

When you export either by going to in5 > Export HTML5 with in5... or to in5 > Easy Export Wizard... and click the Advanced button, go to the Basic section of the Export HTML5 with in5 dialog. Under Navigation, deselect Show Back/Next Arrows.

Comments

Hi Myra,
thanks I know that, but i want to hide the arrow just when it's on a mobile device, on the desktop view, i need arrow but on smartphone. And i'll prefere not to do 2 export from the same file.

Best regards

---

If you're using alternate layouts to create a responsive layout, then I would recommend adding your own custom Back/Next buttons (Window > Interactive > Buttons and Forms) to your layout for your navigation using Go To Previous Page and Go To Next Page actions on your desktop layout and removing them from your mobile layout. When you export you would deselect Show Back/Next Arrows.

---

We don't use responsive layout, we had to make some flipbook with short deadline, so we just had one layout and if possible one export.

I've try somethings that Justin answered in the exchange with CSS but it's doesn't work anymore :
 

@media only screen and (max-device-width : 1024px) {

    .anythingSlider-in5 .arrow { display:none !important; }

}

Maybe it's possible to do that with another css code ?

Thanks

---

Justin said the code has changed since then, so he updated the code on that post. Here it is too:

@media only screen and (max-device-width : 1024px) {

    nav#page-nav > button { display:none !important; }

}

---

Works great, thanks Myra, thanks Justin 

---

You're very welcome! :)