Support » Plugin: Collapse-O-Matic » Arrows change style on mobile

  • Resolved tmits

    (@tmits)


    Hi there,
    I’m experiencing a strange issue where my arrow icons are changing style when I view on a mobile.

    On desktop they display fine as a white arrow, but on my mobile (Android) they show as a blue box with a white arrow inside it. You can see it in the grab here:
    http://toshism.co.uk/wp-content/uploads/2019/06/arrow.jpg

    The code i am using is…

    [expand title=”MORE ⬇” swaptitle=”MORE ⬆” trigclass=”morecol” trigpos=”below”]

    I’d really appreciate it if you might be able to suggest a fix.

    Thanks

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author twinpictures

    (@twinpictures)

    Please post the code you are using using the code button so we can see the actual code you are using.

    What are these arrows? images, font elements?

    If it looks one way on mobile and another way on the desktop, it might be you have overriding CSS defined for smaller screen sizes.

    The code I am using is this:

    [expand title=”MORE ⬇” swaptitle=”MORE ⬆” trigclass=”morecol” ]
    [/expand]

    The arrows are text that I copied from a webpage when I did the search “text arrows”

    From a page like this: http://xahlee.info/comp/unicode_arrows.html

    Plugin Author twinpictures

    (@twinpictures)

    ok. we are going to have to back up a moment.

    do you not know how to use the code button in the forum text editor?
    it would allow this:
    [expand title=”some title”]…[/expand]
    to be displayed in code form like so:

    [expand title="some title"]...[/expand]
    

    Please acquaint yourself with this feature and post back.
    Hint: it’s the button that has the word ‘code’ on it between the li and close tags button.

    Sorry I’m not an expert 😐

    You mean like this?

    [expand title="MORE ⬇" swaptitle="MORE ⬆" trigclass="morecol" ]
    [/expand]
    Plugin Author twinpictures

    (@twinpictures)

    OK! Interesting, so what is going on is WordPress is converting the unicode arrows to emoji icons.

    Install this plugin:
    https://wordpress.org/plugins/disable-emojis/

    Use this code:

    [expand title="MORE ⬇" swaptitle="LESS ⬆" trigclass="morecol" ]...[/expand]
    

    …and post back with your results.

    Installed the plugin and used the code you sent and the result is exactly the same.

    Perhaps I need to use images? Which would be a shame if there are text characters which could be used.

    Plugin Author twinpictures

    (@twinpictures)

    Ah, the code posted here is also converted into emojis.
    Try using the original unicode arrows you copied over from that site.
    That plugin should prevent the emoji conversion on your site.

    OK the plugin is installed and it looks like it’s only the arrows that I want to use are giving undesired effects only on mobile.

    http://www.toshism.co.uk – For demonstration purposes you can see types of arrows being used.

    I have coped both styles from the same page:
    https://unicode-table.com/en/sets/arrows-symbols/

    ideally I wanted to use the ones with the stalks but as they are displaying in a way that i do not like on mobile, it looks like i will have to use the other ones 🙁

    Plugin Author twinpictures

    (@twinpictures)

    you could also try using font-awesome icons
    Sorry, but unicode and wordpress seem to not play together so nicely.
    best of luck!

    Coolio… Thanks for your time.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Arrows change style on mobile’ is closed to new replies.